/* Pizza Love — HAHMO, TULOSRUUTU, JUHLA JA PELIN VALINTA kaikille pelimuodoille.
 *
 * 🔵 Marko 9.10.2026: «pizza basso on nyt pidemmälle viety tyylien suhteen jos
 * ajatellaan voittoruutuja ja tulosruutuja jne. Eli ota siitä mallia, kun
 * yhtenäistät tyylejä.» Siirretty basso.css:stä; jokaisen säännön perustelu
 * (Markon palaute 6.–7.10.2026) kulkee mukana.
 *
 * Ladataan peli.css:n JÄLKEEN ja pelin oman tiedoston (basso.css) EDELLÄ: pelin
 * oma tiedosto saa ylikirjoittaa samantarkkuuksisen säännön.
 * ⚠️ url() ratkeaa TÄHÄN tiedostoon nähden (juuressa), joten kuvat/… toimii. */

/* --- D-DIN CONDENSED: pakkausten DIN-iskulauseen kirjaintyyppi (Marko 9.10.2026) ---
 * Pakkauksissa on Linotypen DIN Condensed (macOS:n järjestelmäfontti, ei verkkolisenssiä).
 * D-DIN on sama DIN 1451 -piirustus, Datton tilaama ja Monotypen tekemä, OFL 1.1
 * (fontit/D-DIN-OFL.txt). 📐 Mitattu rinnakkain: kirjainmuodot osuvat päällekkäin, mutta
 * D-DIN on samalla koolla ≈ 8 % leveämpi ja isot kirjaimet ≈ 3 % matalammat — koko ja
 * kirjainväli säädetään käyttökohdassa. Vain Latin-1 (+ ISO 8859-15): å ä ö riittävät. */
@font-face{
  font-family:'D-DIN Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url('fontit/d-din-condensed-700.woff2?v=20261009a') format('woff2');
}

/* --- TILAPALKKI KOTIVALIKKOSOVELLUKSESSA (Marko 10.10.2026) ---
 * black-translucent (sivupohja.html): sivu jatkuu tilapalkin alle ja tilapalkin teksti on
 * valkoinen. Oranssi raita turva-alueen korkeudelta pitää kellon luettavana kaikissa
 * näkymissä; aloitusruudun oma palkki ja viiri (z 5) peittävät sen. Safarissa ja
 * vaakatasossa turva-alue on 0, joten raitaa ei ole. Peitteet (tauko, asetukset,
 * verkkopeli) väistävät tilapalkin, etteivät pitkät laatikot nouse sen alle. */
body::after{content:"";position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top, 0px);
  background:var(--orange, #EE7203);z-index:4;pointer-events:none}
.peite{padding:max(20px, calc(env(safe-area-inset-top, 0px) + 8px)) max(20px, env(safe-area-inset-right, 0px))
  max(20px, calc(env(safe-area-inset-bottom, 0px) + 8px)) max(20px, env(safe-area-inset-left, 0px))}
.verkko-laatikko{max-height:calc(100dvh - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))}

/* PELIN VALINTA: säännöt ovat `pelivalinta.css`:ssä (14.10.2026) —
   lautapelin sivu lataa valitsimen mutta ei tätä tiedostoa. */


/* --- VALIKKONAPPI vasemmassa yläkulmassa (🔵 Marko 9.10.2026: «asetukset /
 * valikko vasemmassa yläkulmassa ja sitten se "jatka", "eteenpäin" tai "play"
 * -nappi tulla kin oikeaan yläkulmaan, jolloin vain siellä olisi nappeja» ja
 * «korttipelissä voisi hyödyntää samaa ikonia»). Sama kuin lautapelin
 * digiversiossa (apinavaaka/, .av__info): miettivä Basso
 * kermaisessa ympyrässä, tukka ja kyynärpää reunan yli, oranssi ≡-merkki.
 * Mitat suhteutettuna kokoon --k (52 px → kuva 52 px, merkki 19 px).
 * ⚠️ KUVAN LEVEYS MITATTU LIVESTÄ (pizzalove.fi/apinavaaka-testi, 9.10.2026):
 * 52 px. Gitin apinavaaka.css sanoo 76 px (aamun muutos, ei vielä livessä), ja
 * sillä kasvot valuivat oikealle alas ja ≡ peitti suun. Markon kuvakaappaus on
 * 52 px:n versiosta. --- */
.valikko-apina{--k:52px;position:relative;width:var(--k);height:var(--k);flex:none;
  border-radius:50%;border:0;padding:0;cursor:pointer;
  background:#F1EBBC;box-shadow:inset 0 0 0 2.5px #fff, 0 2px 6px rgba(60,30,0,.25)}
.valikko-apina img{position:absolute;left:calc(var(--k) * -.115);top:calc(var(--k) * -.02);
  width:var(--k);height:auto;max-width:none;pointer-events:none;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}
.valikko-merkki{position:absolute;right:-2px;bottom:-2px;width:calc(var(--k) * .365);height:calc(var(--k) * .365);
  border-radius:50%;background:var(--orange, #EE7203);box-shadow:0 0 0 2px #fff;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px}
.valikko-merkki i{display:block;width:calc(var(--k) * .17);height:2px;border-radius:1px;background:#1A1A1A}
.valikko-apina:active img{transform:scale(.95)}
.valikko-apina:focus-visible{outline:3px solid var(--orange, #EE7203);outline-offset:2px}
/* Vaakatasossa kulmanapit kasvavat korttien mukana (peli.css); valikko samoin. */
@media (orientation:landscape){
  .palkki .valikko-apina{--k:max(52px, calc(var(--kortti-lev) * .42))}
}
/* Asetukset avataan valikosta, joten ne ovat sen PÄÄLLÄ: molemmat ovat
 * .peite-kerroksia (z 5), ja valikko on sivulla myöhemmin. */
#asetusPeite{z-index:6}
/* VALIKKOIKKUNA KUVAKKEIN (Marko 9.10.2026: «liikaa tekstiä»): ↻ · ▶ · ⚙ yhdessä
 * rivissä, ▶ isona keskellä; hiusviivan alla Alkuvalikkoon ja Kauppaan. ⏸-merkki
 * poistui («Kaikki ymmärtää, että peli ei jatku taustalla»).
 * 🔵 BRÄNDIN MUKAAN (Marko 9.10.2026: «nuolelle ja asetukset rattaalle oranssi
 * ympyrä ulkopuolelle — — Alkuvalikkoon oranssilla reunaviivalla ja kauppaan
 * oranssilla taustalla — — tämän ikkunan taustalle myös sitä täytekuosia»).
 * Kaksi tasoa, sama pari kummassakin rivissä: TÄYTETTY oranssi = päätoiminto
 * (▶, Kauppaan), ORANSSI ÄÄRIVIIVA = sivutoiminto (↻, ⚙, Alkuvalikkoon). */
.valikko-ikkuna{gap:14px;padding:22px 18px 18px;position:relative;overflow:hidden;max-width:340px}
.valikko-ikkuna::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url('kuvat/kuosi.svg?v=20261006a') repeat;background-size:286px 285px;opacity:.35}
@media (prefers-color-scheme:dark){.valikko-ikkuna::before{display:none}}
.valikko-ikkuna > *{position:relative}
.valikko-toiminnot{display:flex;align-items:center;justify-content:center;gap:clamp(18px, 7vw, 30px)}
.valikko-ikoni{width:58px;aspect-ratio:1;border-radius:50%;padding:0;cursor:pointer;display:grid;place-items:center;
  background:#fff;color:var(--orange, #EE7203);border:3px solid var(--orange, #EE7203);font:inherit;line-height:1;
  box-shadow:0 3px 8px rgba(60,40,20,.15)}
.valikko-ikoni svg{width:54%;height:54%;fill:currentColor}
.valikko-ikoni:active{transform:scale(.95)}
.valikko-ikoni:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
#taukoPeite .valikko-jatka{width:84px}
/* Viiva hukkui kuosin viivoihin var(--raja)-värillä (mitattu 9.10.2026): tummempi. */
.valikko-viiva{align-self:stretch;width:100%;border:0;border-top:1px solid rgba(60,34,12,.28);margin:2px 0 0}
.valikko-ala{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;width:100%}
/* Pyöristetty suorakaide (12 px, ei pilleri — CLAUDE.md:n muotokieli). */
/* Tasaleveät rinnakkain; jos sana ei mahdu (320 px, pitkä käännös), allekkain. */
.valikko-nappi{flex:1 1 0;min-width:max-content;padding:11px 14px;border-radius:12px;cursor:pointer;
  font:inherit;font-size:15px;font-weight:700;text-align:center;text-decoration:none;line-height:1.2;
  border:2px solid var(--orange, #EE7203);box-sizing:border-box}
.valikko-nappi.reuna{background:#fff;color:var(--ink)}
.valikko-nappi.tausta{background:var(--orange, #EE7203);color:#fff}
.valikko-nappi:active{transform:scale(.97)}
.valikko-nappi:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
/* --- PEITE JA LAATIKKO: SIIRRETTY `peli.css`:STÄ 14.10.2026 ---
 * ⚠️ Nämä kolme ovat yleisiä asettelusääntöjä, eivät korttipelin pelilaudan
 * tyyliä, ja lautapelin oma sivu tarvitsee samat. `peli.css`:n lataaminen
 * `apinavaaka.html`:lle olisi tuonut mukana `html,body{height:100%;
 * overflow:hidden}`, joka katkaisee komponenttisivun vierityksen —
 * mitattu, ei arvattu. Siksi siirto eikä kopio. --- */
.peite{position:fixed;inset:0;background:rgba(26,26,26,.55);display:grid;place-items:center;padding:20px;z-index:5}
/* ⚠️ `display:grid` VOITTAA `hidden`-ATTRIBUUTIN, joten piilotus on
   kirjoitettava näkyviin. 📐 Mitattu 14.10.2026: lautapelin päävalikko jäi
   pelin päälle vaikka `hidden` oli asetettu — peli käynnistyi oikein sen
   alla, eikä mikään kertonut mitään. Sama kuvio kuin muilla [hidden]-
   säännöillä tässä tiedostossa. */
.peite[hidden]{display:none}
.tauko-laatikko{background:var(--ground);border-radius:16px;padding:22px 20px;
  max-width:300px;width:100%;display:grid;gap:10px;justify-items:center}
.verkko-osa{display:grid;grid-template-columns:minmax(0, 1fr);gap:10px;justify-items:center;width:100%}

/* --- ALKUVALIKKO SAMAAN TYYLIIN KUIN PELIN VALIKKO (🔵 Marko 9.10.2026: «Muuta
 * myös tämän valikon tyyli tuon toisen valikon mukaiseksi») ---
 * Kuosi taustalla, täytetty oranssi = päätoiminto (Pelaa), oranssi reunaviiva =
 * muut. Koskee molempien pelien alkuvalikkoa ja sen alasivuja (moninpeli, luo,
 * liity), koska ne ovat samassa laatikossa. */
.valikko-laatikko{position:relative}
.valikko-laatikko::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:url('kuvat/kuosi.svg?v=20261006a') repeat;background-size:286px 285px;opacity:.35}
@media (prefers-color-scheme:dark){.valikko-laatikko::before{display:none}
  /* Sama kuin ::before:lla: kuosi on vaalean pohjan kuvio. */
  .peite > .aloitusruutu{background-image:none}}
.valikko-laatikko > *{position:relative}
.valikko-laatikko .as-valinta{border-color:var(--orange, #EE7203)}
.valikko-laatikko .as-valinta.ensisijainen{background:var(--orange, #EE7203);color:#fff}
.valikko-laatikko .as-valinta.ensisijainen small{color:rgba(255,255,255,.92)}
.valikko-laatikko .toinen-nappi{border:2px solid var(--orange, #EE7203);background:#fff;font-weight:700}
/* 🔵 RAIKKAUS SYNTYY KAHDESTA KERROKSESTA (Marko 15.10.2026: «Muuta tämä
   valikko sellaiseksi raikkaaksi, kuten korttipelin perusvalikkokin on»):
   kuosi taustalla ja VALKOINEN pinta sen päällä. Pelkkä hiekanvärinen pohja
   ilman kumpaakaan on se «hailakka» jota vastaan tämä on.
   Luettelo nousee siis omaksi valkoiseksi kortikseen, kuten perusvalikon
   napit. Sama sääntö lautapelin valikossa (apinavaaka.css, .av__taso--paa). */
.valikko-laatikko .as-valikko{background:var(--surface, #fff);border-radius:14px;
  padding:0 14px;box-shadow:0 1px 3px rgba(60,34,12,.10)}
/* Viimeisen rivin alaviiva on kortin reunalla turha. */
.valikko-laatikko .as-valikko .as-rivi:last-child{border-bottom:0}
/* Pelin valinta kuosin päällä: umpinainen pohja, ettei kuosi näy tekstin läpi.
   ⚠️ POHJA ON RIVILLÄ EIKÄ SÄILIÖLLÄ (14.10.2026): valitsin on nyt kaksi riviä
   (laji · pelit), ja säiliö on pelkkä pystysuunta niiden välissä. */
.valikko-laatikko .pelivalinta-ryhma,
.valikko-laatikko .pelivalinta-kytkin{background:#fff;border:2px solid var(--orange, #EE7203)}

/* --- ALOITUSRUUTU KOKO RUUDUN (🔵 Marko 9.10.2026: «Pitäisikö alkuvalikko olla koko
 * ruudun mittainen, jolloin siihen jäisi tilaa myös sille pizza love etiketille? —
 * Sekä alas merkitysten-logolle.») ---
 * Peite ei enää himmennä peliä vaan on itse ruutu: viiri ylhäällä, valinnat
 * keskellä (enintään 360 px), Merkitysten-logo alhaalla. Sama laatikko kantaa
 * moninpelin alasivut (luo, liity, aula), joten ne ovat samassa kehyksessä.
 * Tarkkuus .peite > .aloitusruutu (0,2,0) voittaa peli.css:n .verkko-laatikon. */
.peite:has(> .aloitusruutu){padding:0;background:var(--ground)}
.peite > .aloitusruutu{width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;
  border-radius:0;box-shadow:none;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:calc(env(safe-area-inset-top, 0px) + 14px) 16px calc(env(safe-area-inset-bottom, 0px) + 14px)}
/* ⚠️ KUOSI KOKO VIERITYSALUEELLE, EI VAIN NÄKYVÄÄN LAATIKKOON
 * (Marko 20.10.2026 puhelimesta: «Taustakuosi ei mene alas saakka.»).
 * 📐 Syy: kuosi on `.valikko-laatikko::before{position:absolute;inset:0}`, ja
 * aloitusruutu on ITSE vierityssäiliö (`overflow-y:auto`). Absoluuttinen lapsi
 * mitoittuu säiliön NÄKYVÄÄN laatikkoon, ei sen vieritettävään sisältöön —
 * joten kuosi loppui ruudun alareunaan ja vieritys paljasti paljaan pohjan.
 * Elementin OMA tausta kattaa koko vieritysalueen, joten kuosi siirtyy sinne.
 * Läpikuultavuus (.35) tehdään vaalealla verholla, koska elementin taustalla
 * ei ole omaa opasiteettia. */
.peite > .aloitusruutu::before{display:none}
.peite > .aloitusruutu{background-color:var(--ground, #FAF6EE);
  background-image:linear-gradient(rgba(250,246,238,.65), rgba(250,246,238,.65)),
    url('kuvat/kuosi.svg?v=20261006a');
  background-repeat:repeat, repeat;background-size:auto, 286px 285px}
/* ⚠️ JA SAMA KUOSI PEITTEELLE, KOSKA ALOITUSRUUTU EI AINA TÄYTÄ RUUTUA.
 * Marko sanoi saman asian toistamiseen 20.10.2026 («Taustakuosi ei ulotu alas
 * saakka») — edellinen korjaus vei kuosin vieritysalueelle, mutta ei tänne.
 * 📐 Mitattu Markon kuvakaappauksesta (924 × 2000, DPR 3) riveittäin: alimmat
 * 101 kuvapistettä eli **34 CSS-pikseliä** ovat tasaista #FAF6EE:tä, joissa ei
 * ole yhtään kuosin viivaa; kuosi loppuu riville 1879.
 * 📐 Syy mitattu selaimesta: `.aloitusruutu` on `height:100dvh`, mutta `.peite`
 * on `position:fixed; inset:0`. Kun dvh ratkeaa ruutua matalammaksi — osoite-
 * palkki piiloutuu, standalone-tila, kuvakaappaus kesken palkin liu'un — väliin
 * jää peitteen paljas pohja. Peite on AINA tasan ruudun kokoinen, joten kuosi
 * kuuluu sinne: silloin paljasta kaistaletta ei voi syntyä millään dvh:n
 * arvolla. Aloitusruudun oma kuosi jää, koska se taas kattaa vieritysalueen
 * ruutua pidemmällä sisällöllä. Kuviot ovat samasta kuvasta ja samassa
 * koossa, joten ne osuvat kohdakkain eivätkä näy kahtena. */
.peite:has(> .aloitusruutu){background-color:var(--ground, #FAF6EE);
  background-image:linear-gradient(rgba(250,246,238,.65), rgba(250,246,238,.65)),
    url('kuvat/kuosi.svg?v=20261006a');
  background-repeat:repeat, repeat;background-size:auto, 286px 285px}
.aloitusruutu > .verkko-osa{max-width:360px;margin-block:auto}
/* KAKSI OSAA: YLHÄÄLLÄ TUNNELMA, ALHAALLA NAPIT (Marko 9.10.2026: «yläosa on pelin
 * tunnelmaan virittävää grafiikkaa ja sitten on selkeästi ne napit. Nyt yläosassa on
 * pirusti tyhjää tilaa ja sitten alaosa on tosi ahdas.»). Syy oli keskitys: maskotit ja
 * napit olivat yksi keskitetty ryhmä, joten isompi Basso työnsi kaiken alas ja tyhjä jäi
 * viirin ja maskottien väliin. Nyt aloitussivu venyy, maskottialue (flex:1) täyttää
 * yläosan ja maskottien koko lasketaan SIITÄ; napit ovat alhaalla omalla koollaan. */
/* ⚠️ `flex-shrink:0` EIKÄ 1, JA SE ON MITATTU VIKA (20.10.2026). `1 1 auto`
 * antoi lohkon kutistua sisältöään pienemmäksi, jolloin sisältö EI vieritä
 * vaan VUOTAA ULOS laatikostaan ja piirtyy alapuolisen päälle.
 * 📐 Mitattu 375 x 667 viiden rivin valikolla: `.alku-paa` 129…563, mutta
 * «Kauppaan» 627…675 - siis 64 px oman lohkonsa ALAPUOLELLA, ja Merkitysten-
 * logo (594…633) jäi sen alle. Ruutu ylittyi 8 px.
 * Nyt lohko pitää luontaisen korkeutensa ja `.aloitusruutu` (overflow:auto)
 * vierittää. Vieritys on huono, päällekkäisyys on rikki.
 * ⚠️ Tämä EI korvaa sitä että valikossa on liikaa rivejä (Marko 20.10.2026:
 * «Tässä alkuvalikossa on nyt liikaa kaikkea») - se on vartija sille ettei
 * seuraava rivi riko asettelua äänettömästi. */
.aloitusruutu > .alku-paa{flex:1 0 auto;margin-block:0;display:flex;flex-direction:column;
  align-items:stretch;gap:10px;min-height:0}
/* YLÄLAITA KUTEN PELILAATIKON KANNESSA JA pizzalove.fi:ssä: oranssi palkki koko leveydeltä,
 * musta viiri riippuu sen päältä vasemmassa reunassa, kielivalinta oikealla (Marko 9.10.2026).
 * Viirin korkeus = 0,85 × leveys (viewBox 100 × 85, iskulause LOVEn alla); palkki ≥ 52 px, jotta kielinapin
 * ympärille jää tilaa (Marko 9.10.2026: «Nyt se on ihan puristuksissa tuolla»; 40 px oli liian matala).
 * ⚠️ iPhonessa sivu jatkuu tilapalkin alle (viewport-fit=cover): palkki ja viirin musta
 * jatkuvat ruudun yläreunaan asti. 9.10. viiri «katkesi rumasti» (Markon kuvakaappaus),
 * koska mustan jatkeen piirsi ::before joka jäi oranssin palkin ALLE. Nyt jatke on viirin
 * oma ::before, ja viiri on DOMissa palkin jälkeen. */
.alku-yla{--viiri-l:clamp(112px, 36vw, 200px);--viiri-x:max(16px, 4vw, env(safe-area-inset-left, 0px));
  --palkki:max(52px, calc(var(--viiri-l) * .3));--yla-turva:env(safe-area-inset-top, 0px);
  flex:none;align-self:stretch;z-index:2;
  margin:calc(-1 * (var(--yla-turva) + 14px)) -16px 0;
  height:calc(var(--yla-turva) + var(--viiri-l) * .85)}
.alku-palkki{position:absolute;left:0;right:0;top:0;height:calc(var(--yla-turva) + var(--palkki));
  background:var(--orange, #EE7203);display:flex;align-items:flex-end;justify-content:flex-end;gap:12px;
  box-sizing:border-box;padding:0 max(12px, env(safe-area-inset-right, 0px)) 0 0}
.alku-kielet{height:var(--palkki);display:flex;align-items:center}

/* 🔵 LAJI YLIMMÄSSÄ PALKISSA, KUTEN pizzalove.fi:n `.sivurivi` (Marko 14.10.2026:
 * «Pitäisikö se korttipeli/lautapeli -valinta olla siellä ylhäällä oranssin palkin
 * alapuolella valkoisessa palkissa? Siis samankaltaisessa paikassa, kuin
 * pizzalove.fi-sivustollakin valitaan että mitä tehdään?»)
 *
 * Kyllä, kolmesta syystä: laji on ylin päätös ja ohjaa kaiken alla olevan ·
 * sama paikka ja sama valkoinen palkki kuin sivustolla, joten peli luetaan
 * saman tuotteen osaksi · ja se vapauttaa keskialueen isolle kuvalle, joka
 * vaihtuu lajin mukana — «jotta käyttäjä tietää, että jotain oikeasti muuttuu».
 *
 * ⚠️ PALKKI TÄYTTÄÄ TASAN SEN TILAN JOKA ON JO OLEMASSA: `.alku-yla` on
 * `viiri-l * .85` korkea ja oranssi palkki `palkki` korkea, joten väliin jää
 * ~63 px 375 px:n ruudulla. Siinä tila oli ennen tyhjää kuosia.
 * Viiri riippuu palkin päälle vasemmassa reunassa, ja sisältö alkaa viirin
 * oikealta puolelta — täsmälleen kuten `.sivurivi` tekee. */
/* ⚠️ KORKEUS TULEE SISÄLLÖSTÄ, EI PALKIN JA VIIRIN EROSTA (Marko 15.10.2026:
   «Valkoinen palkki on liian korkea, ota mallia pizzalove.fi -sivuston
   muotoilusta»). 📐 Mitattu sivustolta 375 px:ssä: oranssi 52 px, valkoinen
   **45 px**, linkki `11px 8px` / 13,5 px. Meillä valkoinen venyi `.alku-ylan`
   pohjaan asti eli 63 px:iin, koska sen korkeuden määräsi viiri eikä teksti.
   Nyt `bottom` on auki ja korkeus syntyy välilehdistä, kuten sivustolla.
   Viiri jää riippumaan palkin alareunan yli — se on sama ele kuin sivustolla,
   jossa viiri (80 px) ulottuu valkoisen palkin sisään. */
.alku-lajipalkki{position:absolute;left:0;right:0;
  top:calc(var(--yla-turva) + var(--palkki));
  background:var(--surface, #fff);border-bottom:1px solid var(--line, #E7DCCA);
  display:flex;align-items:center;box-sizing:border-box;
  padding:0 max(12px, env(safe-area-inset-right, 0px)) 0 calc(var(--viiri-x) + var(--viiri-l) + 10px)}
.alku-lajipalkki .pelivalinta{margin:0}
/* Alasivuilla (luo, liity, aula) viiri on piilossa ja palkki kutistuu — silloin
   lajipalkkia ei ole, koska laji on jo valittu ja ruudussa on työ kesken. */
.aloitusruutu:has(.alku-paa[hidden]) .alku-lajipalkki{display:none}
/* ALASIVUT (luo, liity, aula; Partyssa moninpelin valinnat): pelin nimi palkkiin viirin
 * tilalle, ja ylälaita kutistuu palkin korkuiseksi — tila jää sisällölle (Marko 10.10.2026:
 * «Tässä ruudussa se pelimuoto olisi tärkeämpi, kuin tuo pizzaloven etiketti»). */
.alku-pelinimi{display:none;flex:1;min-width:0;height:var(--palkki);align-items:center;
  padding-left:var(--viiri-x);color:#fff;font-size:21px;font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.aloitusruutu:has(.alku-paa[hidden]) .alku-pelinimi{display:flex}
.aloitusruutu:has(.alku-paa[hidden]) .alku-viiri{display:none}
.aloitusruutu:has(.alku-paa[hidden]) .alku-yla{height:calc(var(--yla-turva) + var(--palkki))}
/* Nimikentän ohje («Hahmon nimi (ei pakollinen)») katkesi 320 px:n ruudulla 22 px:n fontilla. */
#bvLuoNimi, #bvLiityNimi{font-size:clamp(17px, 5.4vw, 22px)}
.alku-viiri{position:absolute;left:var(--viiri-x);top:var(--yla-turva);width:var(--viiri-l);display:block;line-height:0}
.alku-viiri svg{width:100%;height:auto;display:block}
/* Iskulause viirissä LOVEn alla, kuten pizzalove.fi:n viirissä (Marko 9.10.2026: «Muuta
 * etiketiksi se versio, jossa se slogan jo lukee pizza loven alapuolella»). Vektorina
 * D-DIN:llä, jotta PIZZA-sanan yläpuolinen musta pysyy pienenä. */
.viiri-iskulause{font-family:'D-DIN Condensed', 'Poppins', sans-serif;font-weight:700;font-size:8.1px;fill:#fff}
.alku-viiri::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--yla-turva);background:#000002}
.alku-viiri:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* Kielivalinta kuten pizzalove.fi:ssä, mutta VALKOINEN oranssin päällä (Marko 9.10.2026:
 * «Musta oranssin päällä on aina vähän tunkkaisen näköinen»). */
.alku-kielet .kielet{position:relative}
.alku-kielet summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  font-size:14px;font-weight:700;color:#fff;padding:6px 10px;border-radius:10px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6);user-select:none;-webkit-user-select:none}
.alku-kielet summary::-webkit-details-marker{display:none}
.alku-kielet summary:hover, .alku-kielet details[open] > summary{box-shadow:inset 0 0 0 1.5px #fff}
.alku-kielet summary:focus-visible{outline:3px solid #fff;outline-offset:2px}
.kielet-pallo{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.kielet-nuoli{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;
  stroke-linejoin:round;transition:transform .15s}
.alku-kielet details[open] .kielet-nuoli{transform:rotate(180deg)}
.kielet-lista{position:absolute;right:0;top:calc(100% + 8px);z-index:3;margin:0;padding:6px;list-style:none;
  min-width:160px;background:#fff;border:1px solid rgba(60,34,12,.15);border-radius:12px;
  box-shadow:0 8px 24px rgba(60,34,12,.18)}
.kielet-lista button{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;
  padding:10px 12px;border:0;border-radius:8px;background:none;font:inherit;font-weight:600;font-size:15px;
  color:var(--ink);text-align:left;cursor:pointer}
.kielet-lista button:hover{background:rgba(244,121,32,.12)}
.kielet-lista button[aria-current="true"]::after{content:"\2713";color:var(--orange, #EE7203);font-weight:800}
@media (prefers-color-scheme:dark){.kielet-lista{background:var(--ground);border-color:rgba(255,255,255,.15)}}
/* Logolle tilaa (Marko 10.10.2026: «Nyt kun kaikki on liian alhaalla, niin merkitysten
 * logokin on puristuksissa»): väli yllä ja alla kasvaa ruudun korkeuden mukana, jolloin
 * napit nousevat ja kuvitus antaa tilaa. */
.alku-logo{width:clamp(96px, 30vw, 132px);height:auto;flex:none;opacity:.85;margin:clamp(6px, 2.5vh, 26px) 0 clamp(8px, 3vh, 34px)}
/* Alasivulla (luo, aula: QR ja lista) tila menee sisällölle. */
@media (prefers-color-scheme:dark){.alku-logo{filter:invert(1)}}

/* Pelin valinta: valittu reunaviivalla eikä täytettynä (🔵 Marko 9.10.2026:
 * «vain Pelaa täytetty») — yksi täytetty oranssi kertoo mistä aloitetaan.
 *
 * ⚠️ URA ON SÄVYTETTY, EI VALKOINEN (Marko 20.10.2026: «siihen liukusäätimeen,
 * jolla pelimuoto valitaan, tehtäisiin isompi ero valitun ja valitsemattoman
 * välillä»). 📐 Mitattu ennen: ryhmän tausta `rgb(255,255,255)` JA valitun
 * täyttö `rgb(255,255,255)` — eli valittua ei erottanut täyttö lainkaan, vaan
 * ainoastaan 2 px rengas ja tekstin tummuus (.62 → 1). Valkoinen valkoisen
 * päällä ei ole korostus.
 *
 * Korjaus EI ole toinen täytetty oranssi: Markon 9.10. sääntö pitää, ja kaksi
 * oranssia pintaa kilpailisi «Tällä laitteella» -napin kanssa. Sen sijaan ura
 * saa sävyn, jolloin valkoinen nappula nousee sen päälle — sama kuvio kuin
 * `pelivalinta.css`:n omassa kytkimessä (`rgba(60,34,12,.10)`). */
.aloitusruutu .pelivalinta-ryhma{border:1px solid rgba(60,34,12,.22)}
/* ⚠️ TARKKUUS EIKA JARJESTYS (CLAUDE.md): `.valikko-laatikko .pelivalinta-ryhma`
 * asettaa saman ominaisuuden samalla tarkkuudella, ja aloitusruudulla on
 * MOLEMMAT luokat. Yhdistelmavalitsin voittaa riippumatta siita kumpi lohko on
 * tiedostossa ensin — yhden luokan saanto olisi jaanyt jarjestyksen varaan. */
/* ⚠️ UMPINAINEN, EI `rgba`. 📐 Mitattu: läpikuultava ura päästi Basson
 * näkymään rivin läpi ja «Pizza Basso» muuttui vaikealukuiseksi. Arvo on
 * sama sävy valkoisen päällä (rgba(60,34,12,.07) ≈ #F1EFEC), mutta pinta
 * peittää. */
.aloitusruutu.valikko-laatikko .pelivalinta-ryhma{background:#F1EFEC}
/* Kytkimen ura on läpikuultava; kuosin päällä se tarvitsee umpinaisen pohjan. */
.aloitusruutu .pelivalinta-kytkin{background:#fff;border:1px solid rgba(60,34,12,.22)}
.aloitusruutu .pelivalinta-liuku{background:var(--warm,#FFF3E9)}
.aloitusruutu .pelivalinta-nappi{color:rgba(26,26,26,.62)}
.aloitusruutu .pelivalinta-nappi.valittu{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--orange, #EE7203)}
/* 🔵 VÄLILEHDET, EI LIUKUKYTKINTÄ (Marko 14.10.2026: «tuo pelin valitsemis-
   liukusäädin on nyt huonon näköinen, koska se on ahtaassa paikassa. Eli laita
   sama tyyli, kuin muutenkin napeilla on valkoisella taustalla
   ylänavigaatiossa»). Arvot ovat pizzalove.fi:n `.sivurivi a` -säännöstä:
   14,5 px / 600 / padding 12px 10px, ja valitulla 3 px oranssi viiva alla.
   ⚠️ Liuku piilotetaan eikä poisteta JS:stä: sama kytkin on yhä peli-ikkunassa
   ja asetuksissa, joissa ahtautta ei ole. */
.alku-lajipalkki .pelivalinta-kytkin{display:flex;background:none;border:0;padding:0;gap:2px}
.alku-lajipalkki .pelivalinta-liuku{display:none}
.alku-lajipalkki .pelivalinta-kytkin-nappi{flex:none;border-radius:0;padding:11px 8px;
  font-size:13.5px;font-weight:600;color:var(--soft, #6E6357);transition:color .15s}
.alku-lajipalkki .pelivalinta-kytkin-nappi.valittu{color:var(--ink, #1A1A1A)}
.alku-lajipalkki .pelivalinta-kytkin-nappi.valittu::after{content:"";position:absolute;
  left:10px;right:10px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--orange, #EE7203)}
@media (min-width:521px){.alku-lajipalkki .pelivalinta-kytkin-nappi{font-size:14.5px;padding:12px 10px}}

/* Maskotit pelivalinnan yläpuolella: miettivä Basso ja ajatuskupla parina.
 * Sommittelu ja sen perustelut alempana, «BASSO JA AJATUSKUPLA».
 * ⚠️ Täällä oli `--sivu`, jolla vanha asettelu työnsi maskotit sarakkeen yli
 * ruudun reunaan. Pari on nyt virrassa eikä kukaan lue sitä — muuttuja, jota
 * ei lueta, näyttää sopimukselta jota ei ole. (Konfetin `--sivu` on eri
 * muuttuja, JS asettaa sen jokaiselle hiutaleelle erikseen.) */
.alku-maskotit{position:relative;z-index:0;flex:1 1 auto;
  width:100%;pointer-events:none}
.alku-paa > :not(.alku-maskotit){position:relative;z-index:1}
/* Valkoinen tarrareuna kuten lautapelilaatikon kyljessä: erottaa hahmon kuosista.
 * ⚠️ ALAREUNASSA EI OLE REUNAA. Basson alareuna on leikkaus joka asettuu
 * pelivalitsimen yläreunaan; valkoinen viiva siinä piirtäisi raon juuri siihen
 * kohtaan jossa kuvan pitää kohdata nappi. */
/* ⚠️ REUNA ON KUVALLA, EI KÄÄREELLÄ. `.alku-basso` on nyt kääre, jonka
 * sisällä ovat myös silmäkerroksen palat; kääreen `filter` piirtäisi
 * valkoisen renkaan myös pupillien ympärille. */
.alku-basso > img{display:block;width:100%;height:auto;
  filter:drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff)
  drop-shadow(0 -2.5px 0 #fff)}
/* ⚠️ Tässä oli kolme kommenttia vanhoista mitoista (translateX reunan yli,
   «basso isompana ja enemmän piiloon» 10.10., «saälittävän pieniä» 14.10.).
   Ne kuvasivat sääntöjä jotka eivät ole enää olemassa — rakastunut
   pizzalaatikko poistui ja sommittelu vaihtui pariksi. Kommentti ilman
   sääntöä on väärää tietoa, ei historiaa. */
/* --- SILMÄT KATSOVAT VALITTUA PELIÄ (Marko 20.10.2026) -------------------
 * «Onko mahdollista, että basson silmät katsoisi siihen mikä on valittu?»
 *
 * ⚠️ ALKUPERÄINEN KUVA EI MUUTU. Pupillin siirto vaatisi muuten
 * maskottikuvan uudelleenmaalauksen, ja se on brändipäätös eikä
 * asettelukysymys. Tässä silmän sisus peitetään valkoisella ympyrällä ja
 * pupilli piirretään uuteen kohtaan — kaksi `i`-elementtiä, ei yhtään
 * JS-riviä, ja poistettavissa poistamalla nämä säännöt.
 *
 * 📐 MITAT LUETTU KUVASTA CANVASILLA (basso-pohtii.webp 560 × 601):
 *   vasen valkuainen  keskipiste 227,8 / 207,4  sisäsäde 36,4
 *   oikea valkuainen  keskipiste 336,8 / 206,8  sisäsäde 38,7
 * Peite on säde − 1,2 px: se peittää koko sisuksen muttei kosketa mustaa
 * rengasta.
 * ⚠️ TÄMÄ ON MITATTAVA EIKÄ ARVATTAVA: ensimmäinen kokeilu peitti
 * ympyrällä säde − 7 px, ja oikeaan silmään jäi musta sirppi. Pupilli on
 * piirroksessa KIINNI renkaassa — mitattu: pupillin etäisyys keskipisteestä
 * on 100 % valkuaisen säteestä molemmissa silmissä — joten peitteen on
 * ulotuttava renkaaseen asti.
 *
 * 📐 KATSEEN SUUNTA ON LASKETTU NAPPIEN PAIKASTA, ei valittu
 * silmämääräisesti. Mitattu 390 × 844: silmien keskikohta on sivulla
 * (106, 282) ja pelivalitsimen nappien keskipisteet (110, 382) ja (280, 382):
 *   Pizza Party → suoraan alas          (dx +4,   dy +100)
 *   Pizza Basso → alaviistoon oikealle  (dx +174, dy +100)
 * Kumpi on voimassa, ratkeaa sivun luokasta (`sivut.py` tietää pelinsä),
 * joten tähän ei tarvita ajonaikaista koodia. */
.alku-silma{position:absolute;display:block;background:#fff;border-radius:50%;
  pointer-events:none}
.alku-silma--v{width:12.57%;aspect-ratio:1;left:34.39%;top:28.65%}
.alku-silma--o{width:13.39%;aspect-ratio:1;left:53.45%;top:28.17%}
/* Pupilli on peitteen lapsi, joten sen paikka on prosentteina SIITÄ —
 * silloin samat kaksi riviä kelpaavat molemmille silmille, vaikka ne ovat
 * eri kokoiset. Halkaisija 41,3 % peitteestä = sama suhde kuin piirroksessa. */
.alku-silma::after{content:'';position:absolute;width:41.3%;aspect-ratio:1;
  background:#161616;border-radius:50%}
.alku-basso--alas .alku-silma::after{left:30.5%;top:56.8%}
.alku-basso--oikealle .alku-silma::after{left:53.2%;top:43%}

/* --- BASSO JA AJATUSKUPLA (Marko 20.10.2026) ------------------------------
 * «Ei tuo ajatuskupla ja basso nyt yhtään voi olla noin. Se on ensinäkin
 *  väärä ajatuskupla.»
 *
 * 📐 MITATTU ENNEN KORJAUSTA, 390 × 844 (party.html):
 *   kupla  `vieteri-kupla.webp` 361 × 420, PEILATTUNA, x −1…170 (ruudun yli)
 *   Basso  `basso-miettii.webp` 516 × 286 -rajaus, irrallinen häntä
 *   kupla peitti Bassoa 81 px korkeudelta
 *   Basson alareuna 376, pelivalitsin alkaa 359 → 17 px Bassoa valitsimen ALLE
 *
 * Kolme asiaa yhdessä, ja kaikki kolme on otettu varainhankintasivun
 * MITTAUKSESTA eikä keksitty tässä uudelleen (`../varainhankinta/index.html`
 * `.basso-nosto`, ja TYOLOKI.md 2.9.2026):
 *
 * 1. OIKEAT TIEDOSTOT. `ajatuskupla.webp` 900 × 582 ja `basso-pohtii.webp`
 *    560 × 601. Ne ovat kaksi erillistä kuvaa juuri siksi, että teksti voi
 *    vaihtua ja Bassoa voi rajata alhaalta.
 *
 * 2. BASSO VASEMMALLE, KUPLA OIKEALLE — JA SEN RATKAISEE PISARAJONO, EI
 *    KATSEEN SUUNTA. Kuvassa on kolme pikkukuplaa pilven YLÄVASEMMALLA,
 *    pienin kauimpana; jono kulkee ajattelijasta pilveen. Sivustolla tämä
 *    oli ensin toisin päin, perusteltuna katseen suunnalla, ja Marko
 *    korjasi sen: «Apina ja ajatuskupla on väärin päin.» Täällä sama
 *    virhe tehtiin uudelleen ja vielä peittona: kupla PEILATTIIN
 *    (`scaleX(-1)`) jotta pallot osoittaisivat oikealle.
 *    ⛔ Älä peilaa kuplaa. Peilaus ei käännä mittausta vaan piilottaa sen.
 *
 * 3. LEIKATTU ALAREUNA KOHTAA ALLA OLEVAN ELEMENTIN. Basson alareuna on
 *    leikkaus jo tiedostossa; se kuuluu pelivalitsimen yläreunaan, ei sen
 *    alle. ⚠️ JA SIKSI BASSOA EI KALLISTETA: sivustolla mitattiin että
 *    `rotate(-4deg)` nostaa leikatun reunan toisen pään irti ja jättää
 *    väliin kiilan — hahmo «leijuu» vaikka laatikko olisi mitattuna kiinni.
 *    Täällä kallistus teki lisäksi juuri sen 17 px:n uppoaman.
 *    (Vaaka-asento on eri asia: siellä Basso kurkkaa ruudun sivusta eikä
 *    nojaa mihinkään, ja kallistus on paikallaan — ks. media query.)
 *
 * Pari on tässä virrassa (flex-rivi) eikä absoluuttisesti sijoitettu:
 * absoluuttinen pari ei voi kohdata alla olevaa elementtiä muuten kuin
 * arvatulla pikselimäärällä, ja kaksi arvausta on jo tehty. */
/* 📐 `margin-bottom` ON MITATTU, EI ARVATTU. `.alku-paa` on flex-sarake
 * jonka `gap` on 10 px, eli nollamarginaalilla Basson leikatun alareunan ja
 * pelivalitsimen väliin jäi mitattuna 10 px kuosia — hahmo leijui. Sivustolla
 * sama kohta on «4 px päällekkäin 390 px:llä», joten 10 + 4 = 14. */
.alku-maskotit{display:flex;align-items:flex-end;justify-content:center;
  min-height:0;margin-bottom:-14px}
/* Leveydet sivuston suhteista: apina 41 %, kupla 58 %, ja kupla limittäin
 * −6 % jotta pisarajono alkaa Basson pään päältä eikä sen vierestä. */
/* ⚠️ KUVAN LAATIKKO EI OLE HAHMON ALAREUNA, JA TÄMÄ ON MITATTU CANVASILTA.
 * Marko 20.10.2026: «Muista asettaa basso siten, että se rajautuu nätisti
 * siihen valintakytkimeen.» Asetin ensin kuvan LAATIKON kytkimen reunaan
 * (4 px limitystä), ja väliin jäi silti näkyvä rako.
 *
 * 📐 Syy luettiin `basso-pohtii.webp`:stä pikseleittäin (560 × 601):
 *   rivi 513  hahmon suora leikkausviiva, leveys 560 px
 *   rivi 560  enää 108 px — vain vasen turkkitupsu ja oikea käsivarsi
 *   rivi 590  58 px · rivi 595  31 px · rivi 600  10 px
 * Eli kuvan alin 87 px (14,5 % korkeudesta) on kapeneva häntä, ei hahmon
 * reuna. Sivustolla päädyttiin samaan lukuun kokeilemalla («limitys on nyt
 * ~14 % kuvan korkeudesta», `.basso-reuna`); tässä se on luettu kuvasta.
 *
 * Siirto on `translateY` PROSENTTEINA, koska translaten prosentti lasketaan
 * elementin OMASTA korkeudesta — `margin-bottom`in prosentti laskettaisiin
 * säiliön LEVEYDESTÄ, eli se rikkoutuisi heti kun suhteet muuttuvat.
 * Siirto ei vie tilaa, joten `.alku-maskotit`in −14 px jää voimaan ja
 * leikkausviiva osuu tasan sinne missä laatikon alareuna oli: 4 px kytkimen
 * sisään. Kapeneva häntä jää kytkimen taakse (z-index 0 vs. 1). */
.alku-basso{position:relative;width:41%;max-width:168px;height:auto;display:block;
  margin:0 0 0 2%;transform:translateY(14.5%);line-height:0}
/* `line-height:0`: kuvan ja tekstikääreen välissä oleva rivinvaihto on
 * anonyymi tekstisolmu, jonka rivikorkeus kasvattaisi kuplaa ja rikkoisi
 * `aspect-ratio`n. */
.alku-kupla{position:relative;flex:1 1 auto;max-width:58%;line-height:0;
  margin:0 0 9% -6%;aspect-ratio:900 / 582;transform:none}
.alku-kupla-pilvi{position:absolute;inset:0;width:100%;height:100%;
  transform:none;pointer-events:none}
/* 📐 TEKSTIN SISÄREUNAT MITATTU TÄSTÄ KUVASTA, EI KOPIOITU SIVUSTOLTA.
 * Tässä oli `18% 15% 13% 21%`, joka on varainhankintasivun luku sen omalle
 * asettelulle. Marko 20.10.2026: «katso, että se keskitetään siihen
 * ajatuskuplaan hyvin» — ja mittaus näytti että teksti oli sivussa.
 *
 * Laskin canvasilla suurimman laatikon joka mahtuu pilven sisään KAIKILLA
 * riveillä joita se peittää (leikkaus eikä yhdiste — pilven reuna
 * aaltoilee, joten yhdiste lupaisi tilaa jota ei ole):
 * Pilven runko ei ole kuvan keskellä: pisarajono vie vasemman reunan, ja
 * rungon keskikohta on 59 % leveydestä ja 56 % korkeudesta. Vanha
 * `18% 15% 13% 21%` oli siis 6,3 % liian vasemmalla.
 *
 * ⚠️ MITTA OTETAAN TEKSTIN OMALLA KORKEUDELLA, EI KOKO PILVEN KORKEUDELLA.
 * Ensin laskin laatikon joka mahtuu KAIKILLE pilven riveille (y 108–516):
 * se antoi vain 63,5 % käyttöleveyttä, koska se joutui mahtumaan myös
 * pilven kapeimpaan kohtaan ylä- ja alareunassa — jonne teksti ei yllä.
 * Teksti vie noin 44 % pilven korkeudesta, ja sen kaistalla (rungon
 * keskikohdan ympärillä, y 199–454) laatikko on
 *   ylä 34,2 %  oikea 6,6 %  ala 21,8 %  vasen 21,6 %  → käyttöleveys 71,9 %
 * eli 8 % enemmän kuin varovainen koko korkeuden mitta.
 *
 * ⚠️ PYSTYPROSENTIT ON MUUNNETTAVA, ja tämä oli toinen oma virheeni:
 * CSS laskee `padding`in prosentit AINA säiliön LEVEYDESTÄ, myös ylä- ja
 * alapehmusteen. Kirjoitin kuvasta mitatut 34,2 % / 21,8 % sellaisenaan, ja
 * ne luettiin leveydestä: 207,6 px:n kuplassa se on 71 + 45 px pehmustetta
 * 167 px:n korkeuteen, jolloin teksti painui alas. Kuvasuhde on kiinteä
 * (900/582 = 1,546), joten korkeuden prosentti jaetaan sillä:
 *   ylä  34,2 / 1,546 = 22,1 %      ala  21,8 / 1,546 = 14,1 %
 * Vaakapehmusteet ovat jo leveydestä eivätkä muutu.
 *
 * ⚠️ `align-items:stretch`, EI `center`, ja se on oma virheeni tältä
 * päivältä. `center` kutistaa lapset omaan sisältoleveyteensä, jolloin yksi
 * pitkä sana tekee `b`:stä LEVEMMÄN kuin sisältolaatikko ja teksti valuu
 * pehmusteen yli — eikä `scrollWidth` näe sitä, koska `b` itse ei ylivuoda.
 * Mitattu 390 × 844: `b` oli 140,7 px kun tilaa oli 131,8, ja
 * «Nopeatempoinen» ylitti pilven reunan 17,7 px. `stretch` sitoo lapsen
 * sisältolaatikkoon, jolloin ylivuoto sekä näkyy että mitataan. */
.alku-kupla b, .alku-kupla-teksti > span{display:block;text-align:center}
/* ⚠️ PEHMUSTE ON KÄÄREELLÄ EIKÄ KUPLALLA, ja tämä oli kolmas virheeni
 * samassa kohdassa. Prosenttipehmuste lasketaan SÄILIÖN leveydestä, ja
 * kuplan säiliö on `.alku-maskotit` (358 px), ei kupla (207,6 px). Mitattu:
 * vasen pehmuste oli 77,3 px kun sen piti olla 44,8, ja sisältoleveydeksi
 * jäi 107 px lasketun 149 px:n sijaan. Kääreen säiliö ON kupla
 * (`position:relative` + `inset:0`), joten sen prosentit osuvat. */
.alku-kupla-teksti{position:absolute;inset:0;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:stretch;
  justify-content:center;gap:2px;padding:22.1% 6.6% 14.1% 21.6%}
/* Isompi kuin ennen, 3,1vw → 4vw (Marko: «Ajatusteksti voisi olla hiukan
 * isommalla fontilla»). 📐 Ylärajan ratkaisee mittaus eikä maku: kupla on
 * leveämmilläänkin n. 208 px (sarake on enintään 360 px), josta käyttöleveys
 * 71,9 % = 149 px, ja pisin katkeamaton sana «Nopeatempoinen» vie 140,7 px
 * 15,6 pikselin koossa. 16 px on siis se mikä vielä mahtuu. */
.alku-kupla-teksti b{font-size:clamp(12px, 4vw, 16px);line-height:1.15;color:var(--ink, #1A1A1A)}
.alku-kupla-teksti > span{font-size:clamp(11px, 3.4vw, 14.5px);line-height:1.2;font-weight:700;
  color:var(--orange, #EE7203)}

/* LAUTAPELIN OMA KUVA (Marko 14.10.2026: «se apinavaaka-kuva olisi hyvä olla
   siinä lautapelin päävalikossa ylhäällä tyhjässä tilassa»). Keskellä ja iso:
   lajia vaihtaessa koko kuva vaihtuu, ja juuri se kertoo että jotain tapahtui. */
/* 🔵 ELÄVÄ VALIKKOAPINA (Marko 15.10.2026). Sama kerrosrakenne kuin pelissä,
   mutta ilman pelin sääntöjä: palkki keinuu hiljaa ja kieli seuraa perässä.
   Napautus (`heilahtaa`) antaa yhden isomman keinahduksen, lamppu välähtää.
   ⚠️ Valkoinen tarrareuna on RYHMÄLLÄ eikä kerroksilla: kerroksittain se
   piirtäisi reunan myös kerrosten väliin, ja apina halkeaisi saumoistaan. */
/* 📐 Leveys on mitattu eikä arvattu: lamppu nostaa kuvan korkeutta, ja
   126 % / 470 px työnsi sen 33 px valkoisen palkin alle. Ja kun rajausta
   väljennettiin säihkeen vuoksi (20 px lampun 150 px:n sijaan), kuva kasvoi
   17 px korkeammaksi — se otettiin leveydestä. 102 % / 380 px mahtuu palkin
   ja ensimmäisen napin väliin 375 × 715 -ruudulla. */
.alku-vaaka{position:absolute;left:50%;bottom:4%;width:min(102%, 380px);
  transform:translateX(-50%);
  filter:drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff)
  drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff)}
.alku-vaaka{overflow:hidden}
.alku-vaaka-kangas{position:absolute;left:0;width:100%}
.alku-vaaka-osa{position:absolute;height:auto;max-width:none;pointer-events:none}
/* Palkki on yksi kappale: molemmat kädet kiertyvät samaan suuntaan, kuten
   pelissä (`kasiV.style.transform = kasiO.style.transform`). */
.alku-vaaka-kasi{animation:alku-keinu 5.5s ease-in-out infinite}
.alku-vaaka-kieli{animation:alku-kieli 5.5s ease-in-out infinite}
/* Pupillit seuraavat osoitinta pehmeästi (apinavaaka.html). Siirtymä on
   silmänräpäystä hitaampi, jotta katse tuntuu katseelta eikä nykäisyltä. */
.alku-vaaka-silmat{transition:transform .32s cubic-bezier(.25,.9,.3,1)}
.alku-vaaka-lamppu, .alku-vaaka-saihkeet{opacity:0;transition:opacity .25s}
@keyframes alku-keinu{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}}
@keyframes alku-kieli{0%,100%{transform:rotate(5deg)}50%{transform:rotate(-7deg)}}

/* Napautus: isompi keinahdus ja lamppu päälle. */
.alku-vaaka.heilahtaa{animation:alku-tarina .9s ease-out}
.alku-vaaka.heilahtaa .alku-vaaka-kasi{animation:alku-keinahda .9s cubic-bezier(.3,1.6,.5,1)}
.alku-vaaka.heilahtaa .alku-vaaka-kieli{animation:alku-kielahda .9s cubic-bezier(.3,1.6,.5,1)}
/* Napautus on ISKUNSILMÄYS: lamppu vilkaisee, mutta säihke jää pois.
   Säihke on varattu sille hetkelle kun pelaaja on oikeasti valinnut (alla). */
.alku-vaaka.heilahtaa .alku-vaaka-lamppu{opacity:1}
@keyframes alku-tarina{0%,100%{transform:translateX(-50%)}30%{transform:translateX(-50%) translateY(-6px)}}
@keyframes alku-keinahda{0%{transform:rotate(0)}35%{transform:rotate(-8deg)}70%{transform:rotate(6deg)}100%{transform:rotate(0)}}
@keyframes alku-kielahda{0%{transform:rotate(0)}35%{transform:rotate(14deg)}70%{transform:rotate(-20deg)}100%{transform:rotate(0)}}
/* 🔵 LAMPPU SYTTYY KUN PELAAJA VALITSEE PELIN (Marko 15.10.2026: «Lamppuun
   pitäisi saada se säihke myös — — vaikka välkehtii tai vähän välähdelleen
   alkaa palamaan. Tai sitten niin, että kun pelaaja valitsee pelin, niin
   sitten lamppu syttyy.»)

   Molemmat: välkähtely on se MITEN, valinta on se MILLOIN.

   ⚠️ Ja syy miksi näin päin: pelissä lamppu tarkoittaa «siirto on oikein».
   Jos se välkkyisi valikossa itsekseen, se tarkoittaisi ei-mitään juuri
   siinä paikassa jossa lapsi oppii sen merkityksen. Nyt se vastaa
   valintaan — ja säihke tulee vain silloin. */
.alku-vaaka.syttyy .alku-vaaka-lamppu{animation:alku-syty .72s linear forwards}
.alku-vaaka.syttyy .alku-vaaka-saihkeet{animation:alku-saihke .72s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes alku-syty{0%,14%{opacity:0}20%{opacity:1}28%{opacity:.1}36%{opacity:1}44%{opacity:.25}52%,100%{opacity:1}}
@keyframes alku-saihke{0%,46%{opacity:0;transform:scale(.6)}75%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
/* Valikko väistyy vasta kun lamppu on syttynyt, jotta se ehditään nähdä. */
#lautaPeite{transition:opacity .22s ease}
#lautaPeite.lahtee{opacity:0}

@media (prefers-reduced-motion:reduce){
  .alku-vaaka-kasi,.alku-vaaka-kieli,.alku-vaaka.heilahtaa,
  .alku-vaaka.heilahtaa .alku-vaaka-kasi,.alku-vaaka.heilahtaa .alku-vaaka-kieli{animation:none}
  /* Lamppu syttyy yhä, mutta ilman välkettä. */
  .alku-vaaka.syttyy .alku-vaaka-lamppu,
  .alku-vaaka.syttyy .alku-vaaka-saihkeet{animation:none;opacity:1}
}
/* YKSI SARAKE (Marko 9.10.2026: «vielä kun ne on noin kahdessa sarakkeessa, niin jotenkin
 * tuntuu siltä, että siinä on kaksi eri puolta»): kaksi leveää nappia allekkain, kuvake
 * vasemmalla. Täytetty = tällä laitteella, reunaviiva = omilla laitteilla. */
.alku-ruudut{display:grid;grid-template-columns:1fr;gap:10px;width:100%}
.alku-ruutu{--ruutu-pohja:#fff;border-radius:16px;border:2px solid var(--orange, #EE7203);
  background:var(--ruutu-pohja);color:var(--orange, #EE7203);cursor:pointer;font:inherit;padding:10px 18px;
  min-height:76px;display:flex;align-items:center;gap:16px;
  box-shadow:0 3px 8px rgba(60,40,20,.12)}
.alku-ruutu.ensisijainen{--ruutu-pohja:var(--orange, #EE7203);color:#fff}
.alku-ruutu b{font-size:19px;line-height:1.15;color:var(--ink);text-align:left}
.alku-ruutu.ensisijainen b{color:#fff}
.alku-ruutu svg{width:68px;height:auto;flex:none}
/* Laitekuvake: puhelimen runko ruudun tekstin värillä (valkoinen / oranssi). */
.laite-runko{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linejoin:round}
/* Puhelimen kotiviiva: se tekee suorakaiteesta puhelimen (Marko 9.10.2026). */
.laite-viiva{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

/* Kauppa omana nappinaan hiusviivan alla: reunaviiva kuten muilla, mutta matalampi kuin
 * pelin aloittavat napit (Marko 9.10.2026: «Kyllä silläkin pitää olla reunukset. Laita
 * siihen pieni hiusviiva noiden pelinappuloiden ja kauppaan väliin.»). */
.alku-viiva{margin:6px 0 0}
.alku-kauppa{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;
  min-height:48px;padding:10px 16px;border:2px solid var(--orange, #EE7203);border-radius:12px;background:#fff;
  color:var(--ink);font-weight:700;font-size:16px;text-decoration:none}
.alku-kauppa .pieni-ikoni{color:var(--orange, #EE7203)}
.alku-kauppa:active{transform:scale(.98)}
.alku-kauppa:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media (prefers-color-scheme:dark){.alku-kauppa{background:var(--ground)}}
.alku-ruutu:active{transform:scale(.97)}
.alku-ruutu:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* Apinan naama: Markon vektori (kuvat/apinanaama_vektori.svg, 9.10.2026),
 * valko-oranssina (Marko: «Pitäisikö se kumminkin olla valko-oranssi?»): valkoinen
 * pinta, oranssit viivat. Oranssi on sama kuin ruudun pohja, joten naama erottuu
 * valkoisena ja piirteet näkyvät pohjan värisinä. */
.apina-pinta{fill:#fff}
/* Kuvakkeessa naama on pienennetty (0,7–0,95), joten viivaa paksunnetaan samassa suhteessa. */
.apina-viiva{fill:none;stroke:var(--orange, #EE7203);stroke-width:1.2;stroke-linecap:round}
.apina-piste{fill:var(--orange, #EE7203)}
/* Hiukset ovat naaman ULKOPUOLELLA ruudun pohjalla, joten pohjan värisinä ne katosivat
 * (Marko 9.10.2026: «Apinalta muuten puuttuu nyt ne hiukset — — Pitäisikö ne olla
 * valkoiset?»). Ruudun tekstin väri: oranssilla valkoinen, valkoisella oranssi. */
.apina-tukka{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}
/* Valkoinen viiva oranssilla näyttää paksummalta kuin oranssi valkoisella (Marko 9.10.2026:
 * «Valkoisilla apinoilla hiukset on nyt tarpeettoman paksut»). */
.alku-ruutu.ensisijainen .apina-tukka{stroke-width:.85}
.puhelin-ikoni rect, .puhelin-ikoni path{fill:none;stroke:currentColor;stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}
.puhelin-ikoni rect + rect{fill:var(--ruutu-pohja)}
.valikko-nappi.pieni{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 12px;font-size:14px}
.pieni-ikoni{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
/* Matala pystynäyttö (320 × 568): kauppanapin ja hiusviivan jälkeen sisältöä oli 29 px liikaa
 * (mitattu 9.10.2026). Napit matalammiksi; maskotit mitoittuvat jäljelle jäävästä tilasta. */
@media (orientation:portrait) and (max-height:640px){
  .peite > .aloitusruutu{gap:10px}
  .alku-ruutu{min-height:62px;padding:6px 16px}
  .alku-ruutu svg{width:58px}
  .alku-kauppa{min-height:42px}
  .alku-logo{width:96px}
  /* Alasivut: odotusaula vieritti 116 px 320 × 568:ssa (mitattu 10.10.2026). Logo pois,
   * QR ja koodi pienemmiksi — koodi, kuvio ja Aloita pysyvät samassa näkymässä. */
  .aloitusruutu:has(.alku-paa[hidden]) .alku-logo{display:none}
  .aloitusruutu .verkko-isanta-qr{width:min(220px, 62vw, 29vh)}
  .aloitusruutu .verkko-isanta-koodi{font-size:44px}
}
/* Matala vaakanäyttö (puhelin vaakatasossa, 375 px): neliöt eivät mahdu —
 * mitattu 9.10.2026: 476 px sisältöä 375 px:n ruudussa. Kuvake sanan viereen. */
@media (orientation:landscape) and (max-height:540px){
  /* Ylälaita on pois virrasta, joten sisältö alkaa palkin (vaakatasossa 46 px) alapuolelta: 568 × 320:ssa
   * palkki peitti pelivalinnan yläreunan ja ruutu vieritti 10 px (mitattu 9.10.2026). */
  /* Logo nousee irti alareunasta (Marko 10.10.2026: «Vaakanäytöllä merkitysten logo on liian
   * alhaalla»): turva-alue (kotiviiva) + väli joka kasvaa korkeuden mukana. */
  .peite > .aloitusruutu{gap:4px;padding-top:calc(env(safe-area-inset-top, 0px) + 50px);
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + clamp(4px, 6vh - 14px, 22px))}
  /* Ylälaita pois virrasta: korkeus kuuluu valinnoille. Viiri mahtuu sarakkeen vasemmalle
   * puolelle myös 568 px:n leveydellä (16 + 84 < 104). */
  .alku-yla{--viiri-l:84px;--palkki:46px;position:absolute;top:0;left:0;right:0;margin:0}
  /* Vaakatasossa maskotit KURKKAAVAT RUUDUN SIVUISTA vinossa (Marko 9.10.2026:
   * «Basso kurkkaa usein eri materiaaleissamme ruudun sivusta, eli niiden ei tarvitse
   * mahtua kokonaan ruutuun — — se hieman vinosta katsominen on usein hauskempi tapa
   * kuvata basso, joka on vauhdikas ja hauska hahmo.»).
   * position:fixed: reuna on RUUDUN reuna eikä sarakkeen, ja ruutu leikkaa kuvan
   * itse (ei vaakavieritystä). Sijainti lasketaan sarakkeen (360 px) viereen; jos
   * tila ei riitä, kuva menee neliöiden ALLE (z-index), ei päälle.
   * Leveydet: Basso ≈ 0,84 × korkeus (basso-syo.webp 438×520), laatikko = korkeus.
   * Basso oikealla, laatikko vasemmalla viirin alla (paikat vaihdettu 9.10.2026). */
  .aloitusruutu > .alku-paa{flex:none;margin-block:auto;gap:8px}
  /* ⚠️ BASSO JA KUPLA PYSYVÄT PARINA MYÖS VAAKATASOSSA, SAMALLA PUOLELLA.
   * 📐 Mitattu 844 × 390 ennen korjausta: Basso oli kiinnitetty oikeaan
   * reunaan (x 712…913) ja kupla vasempaan (x −40…275), eli pisarajono
   * osoitti koko valikon yli POISPÄIN ajattelijasta — sama virhe kuin
   * pystyasennossa, vain leveämpänä. Lisäksi kuplan yläreuna oli y −100 eli
   * otsikkorivi ruudun ulkopuolella, kupla peitti pelivalitsinta 33 × 47 px,
   * ja Basso oli venytetty (201 × 299, kun 560 : 601 vaatii 279 × 299),
   * koska `height` asetettiin mutta `width` jäi pystyasennon prosenttiin.
   *
   * Korjaus: sama flex-pari kuin pystyssä, kiinnitettynä sarakkeen
   * VASEMMALLE puolelle jäävään tyhjään tilaan. Siellä se mahtuu
   * kokonaan (844 px:llä tilaa 242 px) ja järjestys säilyy.
   * Basso ei täällä nojaa mihinkään, joten pieni kallistus on paikallaan —
   * se on Markon «kurkkaa ruudun sivusta vinossa». */
  .alku-maskotit{position:fixed;left:8px;bottom:7vh;z-index:0;
    width:min(252px, calc(50vw - 188px));height:auto;min-height:0;margin:0;
    display:flex;align-items:flex-end;justify-content:flex-start;
    transform:rotate(-3deg);transform-origin:0 100%}
  /* Vaakatasossa Basso ei nojaa mihinkään, joten kapeneva häntä saa näkyä:
   * se on osa piirrosta. Siirto kuuluu vain sinne missä leikkausviivan on
   * kohdattava jokin reuna. */
  /* ⚠️ `position:relative` SÄILYY: silmäkerros on absoluuttinen ja
   * tarvitsee Basson sijoituskontekstikseen. Mitattu 1024 × 500, kun tässä
   * luki `static`: peitteet sijoittuivat `.alku-maskotit`iin (joka on
   * `fixed`) ja valuivat kasvojen ohi. */
  .alku-basso{position:relative;width:41%;max-width:none;height:auto;margin:0;transform:none}
  .alku-kupla{position:relative;flex:1 1 auto;max-width:58%;
    margin:0 0 9% -6%;left:auto;right:auto;top:auto;bottom:auto;transform:none}
  /* 📐 Kapeassa parissa teksti on se joka ei saa hävitä (sama päätös kuin
   * varainhankintasivulla 320 px:llä): kiinteät pienet koot, ei vw-skaalausta,
   * koska vw on täällä ruudun leveys eikä kuplan. */
  .alku-kupla-teksti b{font-size:11px;line-height:1.1}
  .alku-kupla-teksti > span{font-size:10px;line-height:1.15}
}
/* ⚠️ KAPEASSA VAAKARUUDUSSA KUPLALLE EI OLE TILAA, JA SE ON MITATTU.
 * 📐 667 × 375 (iPhone SE vaakatasossa): sarakkeen vasemmalle puolelle
 * jää 143 px, jolloin kupla on 84 px leveä ja sen sisäala 54 px — sana
 * «Nopeatempoinen» vie 11 px:n koossa n. 98 px. Mitattu vuoto: vasemmalta
 * 2 px, oikealta 9 px. Fontin pienentäminen ei auta: 9 px:ssäkin sana vaatii
 * 63 px eli enemmän kuin sisäala, ja sitä pienempi ei ole luettava.
 *
 * 📐 Raja on laskettu mittauksesta eikä valittu. Mittasin pisimmän
 * KATKEAMATTOMAN sanan canvasilla neljällä kielellä ja molemmilla
 * pelimuodoilla, vaaka-asennon 11 px:n koossa:
 *   fi «Nopeatempoinen» 100 px  · fi «jännittävä.» 92 px
 *   de 75 px · en 68 px · sv 69 px
 * Pisin on 100 px. Kuplan sisäala on 64 % sen leveydestä (padding 21 % + 15 %),
 * joten kupla tarvitsee 157 px, pari 58 %:n suhteella 270 px, ja koska pari on
 * `50vw - 188px`, ruudun on oltava vähintään 915 px leveä.
 *
 * ⚠️ ENSIMMÄINEN RAJA (716 px) OLI LIIAN MATALA, ja syy oli mittarissa eikä
 * laskussa: tarkistin luki tekstielementin `getBoundingClientRect`iä, joka on
 * block-elementillä SISÄLTÖLAATIKKO — yli valuva sana ei näy siinä lainkaan,
 * joten 844 × 390 näytti puhtaalta vaikka sana valui 13 px yli. Ylivuoto
 * luetaan `scrollWidth`istä.
 *
 * Sen alla kupla piilotetaan ja Basso jää — ei toisin päin: Basso yksin
 * kurkkaamassa on tämän valikon alkuperäinen vaaka-asu (Marko 9.10.2026),
 * ja koristeen menettäminen on pienempi menetys kuin kuplasta yli valuva
 * teksti. Pelimuotojen ero jää tällä ruudulla pelivalitsimen varaan. */
@media (orientation:landscape) and (max-height:540px) and (max-width:914px){
  .alku-kupla{display:none}
  /* Ilman kuplaa Basso saa koko tilan ja palaa kurkkimaan ruudun reunasta.
   * 📐 Leveys on laskettu niin ettei Basso osu sarakkeeseen: kontti alkaa
   * −18 px:stä, sarake on enintään 360 px keskellä eli alkaa kohdasta
   * `50vw - 180px`, ja väliin jätetään 8 px. Mitattu 568 × 320 ennen rajaa:
   * `50vw - 150px` vei Basson 12 px sarakkeen päälle ja se peitti nappeja
   * 68 px:n matkalta. */
  .alku-maskotit{left:-18px;width:min(150px, calc(50vw - 172px))}
  .alku-basso{width:100%}
  .alku-logo{width:72px}
  .alku-ruutu{min-height:48px;padding:4px 14px;gap:12px}
  .alku-ruutu svg{width:46px}
  .alku-kauppa{min-height:36px;padding:2px 12px}
  .alku-viiva{margin:0}
  .alku-logo{width:64px;margin:0}
}
@media (prefers-color-scheme:dark){
  .alku-ruutu{--ruutu-pohja:var(--ground)}
  .alku-ruutu.ensisijainen{--ruutu-pohja:var(--orange, #EE7203)}
  .aloitusruutu .pelivalinta-nappi{color:var(--ink)}
  /* ⚠️ SAMA VIKA KÄÄNTEEN TUMMASSA TILASSA: ura ja valittu olivat molemmat
     `--ground`, eli valittua ei erottanut täyttö lainkaan. Ura tummenee,
     valittu nousee `--surface`iin. Yhdistelmävalitsin samasta syystä kuin
     vaaleassa: `.valikko-laatikko .pelivalinta-ryhma` on tässä lohkossa
     ALEMPANA ja voittaisi muuten. */
  .aloitusruutu.valikko-laatikko .pelivalinta-ryhma{background:#100D0B}
  /* ⚠️ VAALEA PINTA VAATII TUMMAN TEKSTIN, ja tämä oli oma regressioni samana
     päivänä: kun valitun täytöksi vaihtui `--surface`, teksti jäi `--ink`iin,
     joka on tummassa tilassa VAALEA. 📐 Mitattu ruudulta: kontrasti 1,12 : 1,
     eli valittu peli oli käytännössä näkymätön. Sama päätös kuin
     ajatuskuplassa: vaalea laatta lukee tummalla kummassakin teemassa. */
  /* ⚠️ `#fff` EIKÄ `var(--surface)`: tokenia ei ole määritelty missään, joten
     varaton `var()` resolvoituu LÄPINÄKYVÄKSI. 📐 Mitattu: tumma teksti
     läpinäkyvän päällä tummalla uralla = kontrasti 1,21 : 1. Sama ansa kuin
     `--deep`illä, joka elää vain varansa (#C2580C) turvin. */
  .aloitusruutu.valikko-laatikko .pelivalinta-nappi.valittu{background:#fff;color:#1A1A1A}
  /* ⚠️ AJATUSKUPLA PYSYY VALKOISENA MYÖS TUMMASSA TILASSA, mutta silloin sen
     SISÄLTÖ on pinnattava: `--ink` on tummassa tilassa vaalea (#F7F1E7) ja
     `--orange` kirkkaampi (#FF881F), joten tokeneilla kirjoitettu teksti
     katosi valkoiselle. 📐 Mitattu ruudulta ennen korjausta: otsikko oli
     käytännössä lukukelvoton. Sarjakuvakupla on valkoinen kummassakin
     tilassa — se on kuplan tunnus, ei teema. */
  /* ⚠️ TÄSSÄ OLI MYÖS `background:#fff` JA `border-color`, ja ne piirsivät
     tummassa tilassa VALKOISEN SUORAKAITEEN käsin piirretyn pilven taakse
     (mitattu 390 × 844 tummassa tilassa: laatikko näkyi pilven ympärillä ja
     peitti Basson käsivarren). Säännöt ovat ajalta jolloin kupla oli
     CSS-laatikko; nyt se on kuva, jonka läpinäkyvät kulmat paljastavat
     jokaisen taustavärin. Samasta syystä poistettiin `::before/::after`,
     jotka olivat vanhan laatikon pallot — pilvessä on omansa.
     TEKSTIN värit jäävät: pilvi on valkoinen kummassakin teemassa, joten
     `--ink` (tummassa vaalea) ja `--orange` katoaisivat siihen. */
  .alku-kupla-teksti b{color:#1A1A1A}
  .alku-kupla-teksti > span{color:#C2580C}
  /* Valkoinen pohja + tumman tilan vaalea teksti = näkymätön (mitattu 9.10.2026,
   * koski myös pelin valikon reunanappeja). */
  .valikko-nappi.reuna, .valikko-laatikko .toinen-nappi,
  .valikko-laatikko .pelivalinta-ryhma,
  .valikko-laatikko .pelivalinta-kytkin{background:var(--ground)}
  .aloitusruutu .pelivalinta-kytkin{background:var(--ground)}
  .aloitusruutu .pelivalinta-liuku,.pelivalinta-liuku{background:var(--surface)}
}

/* --- ASETUKSET (uudelleen järjestetty 9.10.2026) ---
 * Kaksi listaa samalla sivulla (Pelaajat: ihmiset ja apinat) erotetaan
 * hiusviivalla eikä otsikolla: listojen omat rivit kertovat mistä on kyse.
 * Selite voi olla useampi kappale (i-napin takana). */
.as-viiva{border:0;border-top:1px solid var(--raja);margin:12px 0}
.as-viiva[hidden]{display:none}
.as-selite p{margin:0}
.as-selite p + p{margin-top:8px}
.as-selite .ohje-otsikko{display:block;margin:14px 0 6px;font-size:16px}

/* --- HAHMO OMALLA VÄRILLÄÄN (Marko 6.10.2026: «kaikilla pelaajilla olisi
 * sekä hahmo että väri») — pelissä, pallilla, radalla ja asetuksissa. --- */
.hahmo{--koko:40px;display:grid;place-items:center;width:var(--koko);height:var(--koko);
  border-radius:50%;background:var(--pelaaja-vari);flex:0 0 auto;
  box-shadow:0 0 0 3px #fff, 0 3px 8px rgba(60,40,20,.25)}
.hahmo img{width:82%;height:auto;display:block}

/* Pizzaa syövä hahmo: ympyrä rajaa sivut ja alaosan, tukka nousee yli.
 * 🔵 Marko 7.10.2026: «apina saisi olla hiukan vieläkin isompi — ruokalappu
 * leikkaantuu kevyesti alhaalta — kädet saa rajautua myös enemmän. Näin se
 * pizza tulee isommaksi keskellä.» → kuva 125 % ympyrän leveydestä, pizza
 * ympyrän keskelle. Laskettu kuvan mitoista (438 × 520; pizza ~58 %, tukan
 * latva ~6 %, ruokalapun alareuna ~90 % kuvan korkeudesta):
 *   kuvan korkeus 1,48 D; kuvan yläreuna 0,36 D ympyrän yläpuolella
 *   → pizza 0,50 D (keskellä), ruokalappu 0,97 D (leikkautuu kevyesti),
 *     tukka 0,27 D ympyrän yläpuolella.
 * Kehys on siksi 30 % ympyrää korkeampi; ympyrän keskipiste on
 * 0,80 / 1,30 = 61,5 % kehyksen korkeudesta. Tukan tila varataan marginaalilla. */
.hahmo.syo{position:relative;overflow:visible;margin-top:calc(var(--koko) * .30)}
.hahmo.syo .syo-kehys{position:absolute;left:0;right:0;bottom:0;top:-30%;
  -webkit-mask:radial-gradient(circle at 50% 61.5%, #000 calc(var(--koko) * .5 - .5px), transparent calc(var(--koko) * .5)),
    linear-gradient(#000, #000) top / 100% 61.5% no-repeat;
          mask:radial-gradient(circle at 50% 61.5%, #000 calc(var(--koko) * .5 - .5px), transparent calc(var(--koko) * .5)),
    linear-gradient(#000, #000) top / 100% 61.5% no-repeat}
.hahmo.syo img{position:absolute;top:calc(var(--koko) * -.06);left:-12.5%;width:125%;height:auto;max-width:none}

/* Nimi pelaajalaatikossa hahmon alla (väri tekstille JS:stä, kontrastin mukaan). */
.laatikkonimi{display:block;font-size:11px;font-weight:700;line-height:1.1;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
.laatikkonimi:empty{display:none}

/* Asetus «Hahmo»: kymmenen väriä Merkitysten järjestyksessä 1–10, viisi per
 * rivi. Useammalla ihmisellä ensin kenen hahmo, sitten väri. */
.hahmo-varit{display:grid;grid-template-columns:repeat(5, auto);gap:6px 8px;justify-content:center;padding:12px 0}
.hahmo-valinta{background:none;border:0;padding:6px;border-radius:50%;cursor:pointer}
.hahmo-valinta .hahmo{--koko:46px}
.hahmo-valinta.valittu .hahmo{box-shadow:0 0 0 3px #fff, 0 0 0 7px var(--ink)}
.hahmo-valinta:disabled{opacity:.25;cursor:default}
.hahmo-pallo{display:inline-block;width:18px;height:18px;border-radius:50%;vertical-align:middle}
.as-arvo .hahmo-pallo + .hahmo-pallo{margin-left:4px}
.hahmo-kuka{display:flex;gap:8px;justify-content:center;padding:4px 0 10px;
  border-bottom:2px solid var(--raja);margin-bottom:6px}
.hahmo-kuka[hidden]{display:none}
.hahmo-nimikentta{display:block;width:100%;max-width:280px;margin:6px auto 8px}

/* --- TULOSRUUTU: kuosi + palkintopalli (Marko 6.10.2026) ---
 * Täytekuosi on sama kuin pizzalove.fi:ssä (julkinen/kuosi.svg, sama koko ja
 * peittävyys), ja tummassa teemassa se on pois kuten sivustollakin. Kaikki
 * yhdessä keskitetyssä sarakkeessa (peli.css:n asettelussa ▶ jäi leveällä
 * näytöllä vasempaan laitaan). */
#tulosRuutu:not([hidden]){display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(8px, 1.6vh, 16px);min-height:100vh;min-height:100dvh;
  position:relative;overflow-x:hidden;cursor:pointer;
  /* ⚙ on yläkulmassa: sisältö alkaa sen rivin alta, ettei se peitä laatikkoa. */
  padding:calc(env(safe-area-inset-top, 0px) + 64px) 0 calc(env(safe-area-inset-bottom, 0px) + 12px);
  /* Varalla vieritys: jos sisältö ei jollain laitteella mahdu, ▶ ei saa jäädä
   * ulottumattomiin (overflow:hidden leikkasi sen 667 px:n korkeudella). */
  overflow-y:auto}
#tulosRuutu::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('kuvat/kuosi.svg?v=20261006a') repeat;background-size:286px 285px;opacity:.45}
@media (prefers-color-scheme:dark){#tulosRuutu::before{display:none}}
/* ⚠️ KUOSI NÄKYY MYÖS PUHELIMESSA (Marko 7.10.2026: «Tulosruudun taustalla
 * saisi olla sitä täytekuosia»). */
#tulosRuutu{--tulos-reunus:clamp(16px, 4.5vw, 24px)}
#tulosRuutu > *{position:relative;z-index:1}
/* ⚠️ LAATIKKO LEVEAMMAKSI (Marko 19.10.2026: «Valkoiset alueet pitaisi olla
 * isommat, jotta niiden sisalla olevat asiat mahtuvat paremmin.»)
 * 📐 Mitattu 375 x 812: laatikko oli 12…363 eli 351 px, ja sija-3:n viimeinen
 * kortti ulottui 354:aan - 9 px reunasta. Nyt reunus on 8 px, joten pallille
 * jaa 8 px enemman, ja viuhka pysyy askelman levyisena (basso.js). */
#tulosPisteet{flex-direction:column;align-items:center;gap:12px;margin:0;width:min(100% - 16px, 620px);
  padding:14px 10px 10px}

/* --- TULOSRUUDUN LAATIKOT kuosin päällä (Marko 7.10.2026: «Pitäisikö näille
 * eri elementeillä olla omat rajatut alueensa taustakuosin päällä?») ---
 * Sama ratkaisu kuin pizzalove.fi:ssä: arvot sivuston .laatikko-tyylistä
 * (julkinen/tyyli.css): valkoinen pinta, reuna #E7DCCA, pyöristys 18 px, sama
 * varjo. Pelin muut laatikot (Bassossa juoksukilpailu) käyttävät .tulos-laatikko-
 * luokkaa. ▶ ja ⚙ jäävät kuosin päälle. */
#tulosPisteet, .tulos-laatikko{background:var(--tulos-pinta, #fff);border:1px solid var(--tulos-reuna, #E7DCCA);
  border-radius:18px;box-shadow:0 1px 2px rgba(60,34,12,.06), 0 8px 24px rgba(60,34,12,.08)}
@media (prefers-color-scheme:dark){
  #tulosPisteet, .tulos-laatikko{--tulos-pinta:#221D18;--tulos-reuna:#38302A}
}

/* PALKINTOPALLI. Askelma: 1. sija korkein ja brändioranssi, muut lämmintä sävyä. */
.palli{display:flex;align-items:stretch;justify-content:center;width:100%;gap:6px}
.palli-paikka{flex:1 1 0;max-width:150px;min-width:0;display:flex;flex-direction:column;align-items:center}
.palli-yla{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:6px;padding-bottom:8px}
.palli-hahmo{position:relative}
.palli-hahmo .hahmo{--koko:clamp(40px, 6.5vh, 64px)}
.sija-1 .palli-hahmo .hahmo{--koko:clamp(48px, 8vh, 78px)}
.palli-nimi{display:block;text-align:center;font-size:13px;font-weight:700;line-height:1.2;margin:0 auto 4px;
  max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palli-askel{width:100%;display:flex;align-items:flex-start;justify-content:center;
  border-radius:12px 12px 0 0;background:#F6D9BF;color:#9A4A0A;
  box-shadow:inset 0 -6px 0 rgba(60,34,12,.08)}
/* ⚠️ NUMERO ON MITOITETTAVA ASKELMAAN (Marko 19.10.2026: «3-podiumin kolmonen
 * on sen alareunan varjon paalla»). 📐 Mitattu 375 x 812: sija-3:n askelma on
 * 40 px korkea, mutta numero oli clamp(24px, 5vh, 40px) = 40 px + 8 px
 * ylamarginaali = 48 px. Se ei vain koskettanut varjoa vaan ylitti koko
 * askelman. Alempi sija = matalampi askelma, joten numerokin pienenee -
 * samalla se kertoo jarjestyksen. Varjo on `inset 0 -6px`, ja jokaiselle
 * jaa sen verran tilaa alareunaan. */
.palli-askel b{font-size:clamp(24px, 5vh, 40px);line-height:1;margin-top:8px}
.sija-2 .palli-askel b{font-size:clamp(20px, 4vh, 32px);margin-top:6px}
.sija-3 .palli-askel b{font-size:clamp(16px, 3vh, 26px);margin-top:4px}
.sija-4 .palli-askel b{font-size:clamp(14px, 2.4vh, 20px);margin-top:3px}
.sija-1 .palli-askel{height:clamp(70px, 12vh, 130px);background:var(--orange);color:#fff}
.sija-2 .palli-askel{height:clamp(50px, 8.5vh, 94px)}
.sija-3 .palli-askel{height:clamp(36px, 6vh, 66px)}
.sija-4 .palli-askel{height:clamp(26px, 4vh, 44px)}
/* Askelman alla pelin oma sisältö. Pohjaviiva yhdistää askelmat lattiaksi. */
.palli-ala{width:100%;display:flex;flex-direction:column;align-items:center;padding-top:10px;
  border-top:4px solid rgba(60,34,12,.18)}
/* Partyn pisteet askelman alla: kerätyt pizzat pisteinä. */
.palli-pisteet{font-size:clamp(24px, 4.4vh, 34px);line-height:1;color:var(--ink)}
.palli-pisteet small{display:block;font-size:12px;font-weight:600;color:var(--himmea, #6b5a4a);
  text-align:center;margin-top:2px}

/* ▶ pelkkänä nappina: brändioranssi ympyrä, valkoinen kolmio piirroksena
 * (ei tekstimerkkiä, jonka muoto vaihtelee fontin mukaan). 🔵 Marko 7.10.2026:
 * «tuon play-napin alta apina pois». */
/* ▶ OIKEASSA YLÄKULMASSA (Marko 9.10.2026), valikkonappi vasemmassa: ruudun
 * alaosa vapautuu sisällölle. Napautus mihin tahansa vie yhä eteenpäin; ▶ on
 * merkki siitä (ja näppäimistön tie), verkossa ⏳ sen tilalla. */
/* ⚠️ #tulosRuutu-etuliite on pakollinen: `#tulosRuutu > *{position:relative}`
 * on ID-tasolla, ja pelkkä luokka hävisi sille — ▶ jäi keskelle (mitattu). */
/* ⚠️ REUNUS ON ISOMPI KUIN MILTA NAYTTAA (Marko 19.10.2026: «Ylareunan napit
 * on liian reunoissa»). Valikkoapinan KUVA tyontyy napin laatikon ULKOPUOLELLE
 * vasemmalle 11,5 % napin leveydesta (.valikko-apina img), eli 52 px:n napilla
 * 6 px. 📐 12 px:n reunuksella kuva alkoi siis x=6:sta. */
#tulosRuutu > .tulos-napit{position:absolute;z-index:3;display:flex;align-items:center;
  top:calc(env(safe-area-inset-top, 0px) + var(--tulos-reunus));
  right:calc(env(safe-area-inset-right, 0px) + var(--tulos-reunus))}
#tulosRuutu > .tulos-valikko{position:absolute;z-index:3;
  top:calc(env(safe-area-inset-top, 0px) + var(--tulos-reunus));
  left:calc(env(safe-area-inset-left, 0px) + var(--tulos-reunus))}
.jatka-nappi{width:52px;aspect-ratio:1;border:0;border-radius:50%;padding:0;cursor:pointer;
  display:grid;place-items:center;background:var(--orange);color:#fff;
  box-shadow:0 0 0 3px #fff, 0 3px 10px rgba(60,40,20,.28);transition:transform .15s}
.jatka-nappi svg{width:46%;height:46%;fill:currentColor}
/* ⚠️ Kolmio on jo optisesti keskellä: sen painopiste on viewBoxin keskellä
 * (polku M8 5.5 v13 l11-6.5). Ennen tässä oli lisäksi margin-left 8 %, ja kolmio
 * näkyi oikealla (Marko 9.10.2026: «Play-nappi ei ole keskellä ympyrää»). */
.jatka-nappi:hover{transform:scale(1.05)}
.jatka-nappi:active{transform:scale(.96)}
.jatka-nappi:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
.jatka-nappi[hidden]{display:none}

/* Konfetti (kun ihminen voitti). */
.konfetti{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.konfetti span{position:absolute;top:-20px;width:9px;height:14px;border-radius:2px;
  animation:konfetti linear both}
@keyframes konfetti{
  from{transform:translate(0, 0) rotate(0)}
  to{transform:translate(var(--sivu), 105vh) rotate(var(--kierto))}
}

/* --- VOITTO TULOSRUUDUSSA (🔵 Marko 9.10.2026: «Yhdistetään nämä kaksi ruutua,
 * kun voittaja on selvillä. Eli maalaa tuo tausta voittajan värillä ja tee
 * voittajan apinasta isompi kuin muiden pelaajien.») ---
 * Erillinen juhlaruutu (7.10.2026) poistui. Täysi väripinta on sallittu, koska
 * voitto on hetki eikä työkalu; kuosi jää pinnan päälle tummempana kuten
 * entisessä juhlassa, ja laatikot pysyvät valkoisina, joten luvut erottuvat
 * millä voittajan värillä tahansa. */
#tulosRuutu.voitto{background:var(--pelaaja-vari)}
#tulosRuutu.voitto::before{display:block;opacity:.22;mix-blend-mode:multiply}
/* Voittaja pallilla: OMA hahmo pizza suussa, selvästi muita isompi. Kruunu ja
 * heiluminen ovat poissa (Marko 7.10.2026: «kruunu on mauton», «heiluu
 * kummallisesti») — kerran ponnahdus ja hiljainen hengitys, vain koko. */
.palli-paikka.syo .palli-hahmo .hahmo{--koko:clamp(78px, 14vh, 132px)}
.palli-paikka.syo .palli-nimi{max-width:none;font-size:15px}
#tulosRuutu.voitto .palli-paikka.syo .hahmo{
  animation:voitto-pomppu .7s cubic-bezier(.2,.9,.3,1.4) both, voitto-hengitys 2.4s .8s ease-in-out infinite}
@keyframes voitto-pomppu{from{transform:scale(.3) translateY(40px)}to{transform:scale(1) translateY(0)}}
@keyframes voitto-hengitys{0%,100%{transform:scale(1)} 50%{transform:scale(1.035)}}
@media (prefers-reduced-motion: reduce){#tulosRuutu.voitto .palli-paikka.syo .hahmo{animation:none}}

/* Matala ruutu (puhelin vaakatasossa): mitattu 844 × 390 Bassossa, sarakkeena
 * sisältö vei 418 px. Napit ovat kulmissa (9.10.2026), joten Partyssa palli on
 * keskellä; Basso lisää toisen sarakkeen (kisa) omassa tiedostossaan.
 * ⚠️ Lohko on TIEDOSTON LOPUSSA, koska se ylikirjoittaa yllä olevia
 * samantarkkuuksisia sääntöjä — muualla se hävisi hiljaa. */
@media (max-height: 500px){
  #tulosRuutu:not([hidden]){display:grid;grid-template-columns:minmax(0, 1fr);
    grid-template-areas:"palli";
    align-content:center;align-items:center;column-gap:28px;row-gap:12px;
    /* kulmanapeille tila molemmin puolin */
    padding:8px 76px 8px 76px}
  #tulosPisteet{grid-area:palli;width:100%;max-width:440px;justify-self:center;gap:4px}
  .palli-yla{gap:3px;padding-bottom:4px}
  .palli-ala{padding-top:4px}
  .palli-paikka.syo .palli-hahmo .hahmo{--koko:clamp(60px, 18vh, 96px)}
}

/* Puhelin pystyssä (501–900 px). Raja oli 740 px; 9.10.2026 mitattu voittoruudulla:
 * 760 px:llä ▶ päättyi 843:een ja 852 px:llä 892:een, koska tavalliset mitat
 * kasvavat korkeuden mukana. Tiivis tila kattaa nyt kaikki puhelimet pystyssä. */
@media (min-height: 501px) and (max-height: 900px){
  #tulosRuutu:not([hidden]){padding-top:calc(env(safe-area-inset-top, 0px) + 60px);gap:8px}
  .palli-ala{padding-top:8px}
  /* Voittoruutu (9.10.2026): mitattu 375 × 667, isompi voittaja vei ▶:n 62 px
   * ruudun alle. Kun ▶ siirtyi oikeaan yläkulmaan, tilaa vapautui ≈ 64 px, ja
   * voittaja sai osan takaisin (13vh: 667 → 87 px, 852 → 111 px). Askelmat
   * pysyvät matalampina, joten sijajärjestys erottuu yhä. */
  .palli-paikka.syo .palli-hahmo .hahmo{--koko:clamp(64px, 13vh, 124px)}
  .sija-1 .palli-askel{height:clamp(52px, 9.5vh, 130px)}
  .sija-2 .palli-askel{height:clamp(40px, 7vh, 94px)}
  .sija-3 .palli-askel{height:clamp(30px, 5vh, 66px)}
  .sija-4 .palli-askel{height:clamp(22px, 3.5vh, 44px)}
}

/* --- VIETERILAATIKKO AULAAN (Marko 19.10.2026) ---------------------------
 * «Tätä olisi hauska käyttää joissain pelin kohdissa sellaisena latauskuvana
 * — — että se tulee kuvan yläruudusta alas ja sitten lähtee joko oikealle tai
 * menee takaisin ylös.» Lähde: «Vieterilaatikko kala.psd» (1440 x 4089, CMYK).
 *
 * 📐 MIKSI JUURI AULA: mitattu 19.10. missä pelissä on oikeasti odottamista.
 * Aula (Party `verkko.odota`, Basso `bverkko.odotaPelaajia`) on ainoa AUKI
 * oleva odotus - kaikki muut ovat sekunteja (vastattu, seuraava kierros), ja
 * Apinavaaassa ei ole odotusta lainkaan. Aulassa ruudulla on vain koodi ja
 * nimilista eikä mikään liiku.
 *
 * ⚠️ KUVA ON KAHDESSA OSASSA, JA JAKOKOHTA ON MITATTU EIKÄ ARVATTU.
 * PSD:n yhtenäinen piirros jaettiin kapeimmasta nivelestä (y = 1762, leveys
 * 87 px 2400 px:n renderissä); ajatuskupla ja pikkukuplat ovat PSD:ssä omia
 * yhtenäisiä alueitaan, joten ne jäivät pois ilman rajausta. Nivelen keskikohta
 * on varressa 56,5 % ja laatikossa 28,7 % kuvan leveydestä - siksi `left`-
 * siirtymät ovat juuri nuo luvut. Jos kuvat vaihdetaan, luvut on mitattava
 * uudelleen; silmämääräinen kohdistus näkyy saumana.
 *
 * ⚠️ VARSI VENYY `scaleY`:LLÄ, EI TOISTAMALLA. Oikeassa saksivarressa timantit
 * kapenevat kun ne pitenevät, ja tasan sen `scaleY` tekee - toisto antaisi
 * saman muotoisia timantteja lisää, mikä on väärä liike. Siksi varren korkeus
 * on `--vieteri-matka` ja animaatio skaalaa sitä.
 *
 * ⚠️ KAKSI ANIMAATIOTA, SAMA KESTO - EI MUUTTUJAN ANIMOINTIA. Laatikon on
 * pysyttävä varren päässä koko matkan. `@property`-animointi olisi yksi
 * animaatio, mutta se ei ole kaikissa selaimissa; kaksi samankestoista
 * avainkehystä pysyy synkassa ilman sitä. Lepotila on `scaleY(0)` +
 * `translateY(0)` eli MOLEMMAT nollassa - jos lepotilat eroaisivat, laatikko
 * irtoaisi varren päästä matkan puolivälissä.
 *
 * Säiliö on nollan kokoinen ankkuri nivelen kohdalla ja alkaa laatikon
 * korkeuden verran ruudun yläreunan YLÄPUOLELTA, joten levossa se on näkyvän
 * alueen ulkopuolella ilman leikkausta. */
.vieteri{
  /* ⚠️ LEVEYS LASKETAAN QR:N OMASTA KAAVASTA, EI ARVATA RUUDUN LEVEYDESTÄ.
   * Tässä luki ensin `8vw`, ja se sovitettiin 375 px:n ruutuun - 📐 jolloin
   * heilahduksen äärikohdassa laatikon kulma meni 4 px QR-kortin päälle.
   * Yksi mitattu ruutuleveys ei kelpaa perustaksi, koska VÄLI EI OLE
   * VAKIO-OSUUS RUUDUSTA:
   *   .aloitusruutu .verkko-isanta-qr{width:min(220px, 62vw, 29vh)}
   * eli 375 px:n ruudulla väliä on 77,5 px mutta 320 x 568:ssa 77,7 px -
   * QR kutistuu matalalla ruudulla ja väli KASVAA.
   *
   * Mitoituksen ehdot (W = laatikon leveys, H = 1,111 W, kierrot -8° / +6°,
   * kupla ei kierry):
   *   oikea reuna  A + 0,9156 W ≤ väli − 4     (kuplan oikea reuna)
   *   vasen reuna  A − 0,4027 W ≥ 4            (laatikko +6°:n kohdalla)
   * Näistä W ≤ (väli − 8) / 1,3183 ja A = 4 + 0,4027 W.
   * Jakaja 2,7684 alla on 1,3183 × 2,1 (laatikko = 2,1 × varsi). */
  --vieteri-vali: calc((100vw - min(220px, 62vw, 29vh)) / 2);
  --vieteri-lev: clamp(18px, min(8vw, (var(--vieteri-vali) - 8px) / 2.7684), 52px);
  /* Matka on 1,35 x varren luonnollinen pituus: saksivarsi VENYY, eli timantit
     pitenevät ja kapenevat - juuri niin oikea vieteri tekee ojentuessaan.
     📐 Ilman venytystä laatikko jäi 375 x 812:ssa QR:n (194…414) yläreunan
     tasolle; venytettynä se on sen vierellä. */
  --vieteri-matka: min(calc(var(--vieteri-lev) * 1100 / 158 * 1.35), 46vh);
  --vieteri-laatikko: calc(var(--vieteri-lev) * 2.1);
  --vieteri-kork: calc(var(--vieteri-laatikko) * 360 / 324);
  /* Matka ulos oikeasta reunasta: koko ruudun leveys + laatikko. */
  --vieteri-ulos: calc(100vw + var(--vieteri-laatikko));
  /* ⚠️ `fixed` EIKÄ `absolute`, JA SE ON MITATTU VIRHE. Absoluuttisena ankkuri
     oli lähin asemoitu esi-isä, ja se on ERI KAHDESSA PELISSÄ: Partyssa
     `#verkkoPeite` (ruudun yläreuna), Bassossa `.verkko-osa`, joka on
     `position:relative` ja alkaa 📐 y=128:sta. Lepotila `top:-korkeus` oli siis
     Bassossa ruudun SISÄLLÄ: laatikko roikkui näkyvissä y 49…128 koko sen ajan
     kun sen piti olla piilossa. `fixed` tekee ankkurista saman molemmissa.
     ⚠️ Jos jokin esi-isä saa joskus `transform`in, `filter`in tai
     `backdrop-filter`in, se kaappaa myös `fixed`in - nyt ketjussa ei ole yhtään. */
  position:fixed;top:calc(-1 * var(--vieteri-kork));
  left:calc(4px + var(--vieteri-laatikko) * .4027);
  width:0;height:0;pointer-events:none;z-index:1;display:none;
  animation:vieteri-sivu 14s infinite;
}
.on-aula .vieteri{display:block}
/* ⚠️ `max-width:none` ON PAKOLLINEN: peli.css:161 asettaa `img{max-width:100%}`,
   ja säiliön leveys on 0 (se on pelkkä ankkuri nivelen kohdalla) - 📐 mitattu
   ilman tätä: laatikko 3 px leveä ja varsi 0, korkeudet oikein. */
.vieteri img{position:absolute;top:0;display:block;max-width:none}

/* ⚠️ NELJÄ ELEMENTTIÄ, NELJÄ TEHTÄVÄÄ - JOKAINEN ARVO VAIN YHDESSÄ PAIKASSA.
 * Ensimmäinen versio pani sekä X-siirron että Y-siirron SEKÄ laatikolle että
 * varrelle, eli sama ajoitus oli kahdessa avainruutusarjassa. Nyt:
 *   .vieteri         sivuttainen siirto (X)   - koko vehje liikkuu
 *   .vieteri__riippu laskeutuminen (Y)        - laatikko JA kupla yhdessä
 *   .vieteri__varsi  venyminen (scaleY)       - jää yläreunaan
 *   .vieteri__laatikko heilahdus (rotate)     - vain laatikko, ei kupla
 * Kaikilla sama 14 s, joten ne pysyvät synkassa ilman jaettua muuttujaa. */
.vieteri__riippu{position:absolute;top:0;left:0;width:0;height:0;
  animation:vieteri-alas 14s infinite}
.vieteri__varsi{left:calc(var(--vieteri-lev) * -.565);
  width:var(--vieteri-lev);height:var(--vieteri-matka);
  transform-origin:top center;animation:vieteri-varsi 14s infinite}
.vieteri__laatikko{left:calc(var(--vieteri-laatikko) * -.287);
  width:var(--vieteri-laatikko);height:var(--vieteri-kork);
  transform-origin:28.7% 0;animation:vieteri-heilahdus 14s infinite}

/* AJATUSKUPLA (Marko 19.10.2026: «Voisiko sille laatikolle laittaa
 * ajatuskuplaa ja että se täyte, jota laatikko haaveilee, vaihtuisi eri
 * kerroilla?»). Kuva on sama PSD, josta varsi ja laatikko on leikattu:
 * iso kupla + neljä pikkukuplaa yhtenä alueena, ja ISON KUPLAN SISUS on
 * maalattu valkoiseksi (kala pois) eroosiolla 7 px kuplan reunasta sisäänpäin.
 *
 * ⚠️ VAAKASIIRTYMÄ ON PIENENNETTY PSD:N 0,5548 W:STÄ 0,30 W:HEN, ja se on
 * tietoinen poikkeama alkuperäisestä sommittelusta. 📐 PSD:n etäisyydellä koko
 * ryhmän leveys olisi 1,5731 W, jolloin 375 px:n ruudun 77,5 px:n väliin
 * mahtuva laatikko olisi 44 px; 0,30 W:llä se on 53 px. Kuplan KOKO ja
 * PYSTYSUHDE ovat PSD:stä koskemattomina.
 *
 * ⚠️ KUPLA (ja laatikko) ON DOMISSA VARREN JÄLKEEN, jotta se piirtyy vieterin
 * PÄÄLLE - Marko 20.10.2026: «laita se ajatuskupla vieteritason päälle».
 * Tässä luki ensin päinvastoin, perusteena «ajatus nousee hahmon takaa».
 * ⚠️ JÄRJESTYS ON DOMISSA EIKÄ `z-index`issä, ja se on pakko: `.vieteri__riippu`
 * on animoitu `transform`illa, mikä tekee siitä PINOAMISKONTEKSTIN - kuplan
 * oma `z-index` ei siis yltäisi sen ulkopuolelle varren yli.
 * Laatikko tulee samalla varren päälle, ja se on oikein: varren alapään hahlo
 * on leikattu laatikon kuvaan (leikkaus tehtiin kapeimmasta nivelestä), joten
 * hahlon kuuluukin peittää varren pää. */
.vieteri__kupla{position:absolute;
  left:calc(var(--vieteri-laatikko) * .013);
  top:calc(var(--vieteri-laatikko) * -.6348);
  width:calc(var(--vieteri-laatikko) * .9026);
  height:calc(var(--vieteri-laatikko) * 1.0504);
  animation:vieteri-kupla 14s infinite}
.vieteri__kupla-kuva{position:absolute;inset:0;width:100%;height:100%}
/* Täyte kuplan sisällä: pelin oma kuvio pelin omalla värillä (vieteri.js).
   📐 Paikka JA koko mitattu kuvasta: iso kupla on x 27…518 ja y 0…414 ryhmän
   518 x 604 px:n rajauksessa, eli sen keskipiste on 52,5 % / 34,3 %. Kiekko on
   58 % ryhmän leveydestä = 300 px, ja kuplan sisus reunuksen jälkeen on noin
   441 px - se mahtuu, eikä kosketa reunan kuhmuja. */
.vieteri__tayte{position:absolute;left:52.5%;top:34.3%;width:58%;aspect-ratio:1;
  transform:translate(-50%, -50%);border-radius:50%;display:grid;place-items:center;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.vieteri__tayte img{position:static;width:70%;height:70%;object-fit:contain}

/* ⚠️ LIIKERATA ON MARKON (19.10.2026): «se saisi tulla tuon qr-koodin
 * vasemmalla puolella alas, vähän heilahtaa ja liikkua kuvassa oikeasta
 * reunasta ulos liukumalla.» Vaiheet 14 s:n kierrossa:
 *   0-3 %    piilossa ruudun yläpuolella
 *   3-17 %   laskeutuu QR:n vasemmalle (1,96 s)
 *   17-37 %  heilahtaa ja haaveilee (2,8 s)
 *   37-60 %  liukuu oikealle ulos kuvasta, kiihtyen (3,2 s)
 *   61-100 % poissa - tauko ennen seuraavaa kierrosta (5,5 s)
 *
 * 🔴 `steps(1, end)` 60 %:n KOHDASSA ON KORJAUS NÄKYVÄÄN VIKAAN (Marko
 * 19.10.2026: «animaation lopussa on jokin pieni bugi, joka näkyy ruudulla
 * sellaisena vieterin nopeana siirtymänä takaisin 0-kohtaan»). Kirjoitin
 * tähän ensin, että paluu alkuun tapahtuu näkymättömissä - ja se oli VÄÄRIN:
 * avainruudut INTERPOLOIVAT myös lyhyen välin yli, joten 64 % -> 65 % ei ollut
 * hyppy vaan 90 ms:n pyyhkäisy koko ruudun läpi oikealta vasemmalle. Juuri sen
 * Marko näki. Askelfunktio pitää arvon 60 %:ssa ja vaihtaa sen kerralla 61 %:n
 * kohdalla, eli ilman välitilaa.
 *
 * ⚠️ Päättely «se on näkymättömissä» ei korvaa mittausta: 1 % 9 sekunnista on
 * 90 ms, ja 90 ms riittää hyvin näkyvään liikkeeseen.
 *
 * ⚠️ KALLISTUS LIU'USSA ON POSITIIVINEN. Kiertokeskipiste on laatikon
 * yläreunassa (28,7 % 0), joten myötäpäivään kierto vie alareunan VASEMMALLE -
 * eli jälkeen jääden, kuten roikkuva kuorma kun kannatin liikkuu oikealle. */
@keyframes vieteri-sivu{
  0%, 37%   {transform:translateX(0); animation-timing-function:cubic-bezier(.45,0,.75,.3)}
  60%       {transform:translateX(var(--vieteri-ulos)); animation-timing-function:steps(1, end)}
  61%, 100% {transform:translateX(0)}
}
@keyframes vieteri-alas{
  0%, 3%    {transform:translateY(0); animation-timing-function:cubic-bezier(.3,.75,.35,1)}
  17%, 60%  {transform:translateY(var(--vieteri-matka)); animation-timing-function:steps(1, end)}
  61%, 100% {transform:translateY(0)}
}
@keyframes vieteri-varsi{
  0%, 3%    {transform:scaleY(0); animation-timing-function:cubic-bezier(.3,.75,.35,1)}
  17%, 60%  {transform:scaleY(1); animation-timing-function:steps(1, end)}
  61%, 100% {transform:scaleY(0)}
}
@keyframes vieteri-heilahdus{
  0%, 17%   {transform:rotate(0deg)}
  23%       {transform:rotate(-8deg)}
  29%       {transform:rotate(6deg)}
  34%       {transform:rotate(-3deg)}
  40%, 50%  {transform:rotate(0deg)}
  60%       {transform:rotate(9deg); animation-timing-function:steps(1, end)}
  61%, 100% {transform:rotate(0deg)}
}
/* Kupla ilmestyy kun laatikko on paikallaan ja katoaa ennen liukua: haave
   kuuluu siihen hetkeen kun se roikkuu, ei matkaan. */
@keyframes vieteri-kupla{
  0%, 17%   {opacity:0; transform:scale(.3)}
  24%, 48%  {opacity:1; transform:scale(1)}
  56%, 100% {opacity:0; transform:scale(.4)}
}
/* Liike ON tämän kuvan koko sisältö, joten vähennetyssä liikkeessä se jää pois
   kokonaan - paikallaan roikkuva laatikko olisi vain este ruudun yläreunassa. */
@media (prefers-reduced-motion: reduce){ .on-aula .vieteri{display:none} }

/* --- QR-SKANNERI (Marko 20.10.2026) ---------------------------------------
 * «QR-koodin luku pitäisi olla mahdollista myös pizza loven pelaamisessa
 * suoraan.» Rakenteen tekee `qrluku.js`; täällä on vain ulkoasu.
 *
 * ⚠️ `z-index` on peitteitä (`.peite`, z-index 5) korkeampi: skanneri avataan
 * liittymisruudusta, joka ON peite. Matalampi jäisi sen alle - sama ansa kuin
 * `#verkkoPeite`issä. */
.qr-peite{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:20px;
  background:rgba(26,20,12,.92);animation:qr-sisaan .25s ease-out both}
@keyframes qr-sisaan{from{opacity:0}}
/* Ikkuna on neliö: QR on neliö, ja pystykuva jättäisi puolet kameran alasta
   käyttämättä. `object-fit:cover` rajaa videon siihen vääristämättä. */
.qr-ikkuna{position:relative;width:min(78vmin, 420px);aspect-ratio:1;
  border-radius:18px;overflow:hidden;background:#000}
.qr-video{width:100%;height:100%;object-fit:cover;display:block}
/* Kulmamerkit kertovat mihin koodi osoitetaan. Ei täyttä kehystä: se peittäisi
   kuvan reunat juuri siitä mistä koodia etsitään. */
.qr-kehys{position:absolute;inset:12%;border-radius:10px;pointer-events:none;
  background:
    linear-gradient(var(--orange, #EE7203) 0 0) 0 0/22% 3px no-repeat,
    linear-gradient(var(--orange, #EE7203) 0 0) 0 0/3px 22% no-repeat,
    linear-gradient(var(--orange, #EE7203) 0 0) 100% 0/22% 3px no-repeat,
    linear-gradient(var(--orange, #EE7203) 0 0) 100% 0/3px 22% no-repeat,
    linear-gradient(var(--orange, #EE7203) 0 0) 0 100%/22% 3px no-repeat,
    linear-gradient(var(--orange, #EE7203) 0 0) 0 100%/3px 22% no-repeat,
    linear-gradient(var(--orange, #EE7203) 0 0) 100% 100%/22% 3px no-repeat,
    linear-gradient(var(--orange, #EE7203) 0 0) 100% 100%/3px 22% no-repeat}
.qr-ohje{margin:0;max-width:420px;text-align:center;color:#fff;
  font-size:clamp(15px, 4vw, 18px);line-height:1.4}
.qr-ohje--virhe{color:#FFD4C2}
.qr-peite .qr-sulje{width:min(100%, 420px);margin:0}

/* Nappi koodikentän vieressä. `hidden` kunnes `qrluku.js` toteaa luvun
   mahdolliseksi - nappi joka ei voi toimia on huonompi kuin ei nappia. */
.qr-nappi{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;font:inherit;font-size:16px;cursor:pointer;
  background:#fff;color:var(--ink);border:2px solid var(--raja);
  border-radius:12px;padding:11px}
.qr-nappi:hover{border-color:var(--orange)}
.qr-nappi[hidden]{display:none}
.qr-nappi svg{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:var(--orange);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}


/* --- SIIRTYMÄ JA LATAUSKUVAKE (Marko 20.10.2026) --------------------------
 * «Se voisi toki toimia siirtymänä esim. zoomautumalla — — kun pelaaja on
 * painanut jotain nappia. Myös sellainen latauskuvake olisi hauska, jossa nuo
 * sydämet kiertävät laatikkoa.»
 *
 * Rakenne on JS:ssä (`siirtyma.js`), koska peite on sama kaikilla sivuilla.
 *
 * ⚠️ SYDÄMET OVAT OMA KUVANSA, EIVÄT `halaus.webp`:n omat. 📐 Mitattu:
 * `halaus.webp`:ssä sydämet on piirretty kuvaan kiinni (yksi yhtenäinen
 * saareke myös alfarajalla 250), joten niitä ei voi kiertää erikseen — ja
 * ympyrärajaus laatikon ympäri leikkaisi laatikon kulmat, koska laatikko ja
 * sydämet menevät säteittäin päällekkäin (sydämet r ≥ 140, laatikon kulmat
 * yli sen). Kiertävät sydämet tulevat siksi Markon omasta sydänkaaresta
 * (`sydämet_sydänkaari_pieni_UUSI_isompi.png`), joka rajattiin NELIÖKSI
 * kaaren keskipisteen ympärille: vain silloin `rotate` kiertää sen omaa
 * kaartaan pitkin eikä heilauta sitä ympyrän ulkopuolelle. Kaaren
 * keskipiste ja säde sovitettiin sydänten painopisteistä (jäännös ±7 px).
 *
 * ⚠️ `pointer-events` on `none` heti kun peite häviää: peite joka jää
 * nielemään napautuksia on lukko, ei siirtymä. */
.siirtyma{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  pointer-events:none;opacity:0;visibility:hidden;
  /* 📐 Peite oli ensin lapinakyva (.96/.92) ja alla oleva valikko kilpaili
     sydanten kanssa — ruudulla oli kaksi asiaa yhta aikaa. Umpinainen pohja
     tekee siirtymasta hetken eika harson. */
  background:radial-gradient(circle at 50% 50%, #fff 0 46%, var(--ground, #FAF6EE) 100%)}
.siirtyma--nakyy{opacity:1;visibility:visible;pointer-events:auto;
  animation:siirtyma-pohja .18s ease-out both}
.siirtyma--pois{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease-in, visibility 0s linear .22s}
@keyframes siirtyma-pohja{from{opacity:0}}

/* Kehys antaa molemmille kuville saman keskipisteen: sydämet kiertävät
   laatikkoa, eivät sen vierestä. */
.siirtyma-kehys{position:relative;width:min(62vw, 62vh, 300px);aspect-ratio:1;
  display:grid;place-items:center}
.siirtyma-kaari,.siirtyma-boksi{position:absolute;display:block;max-width:none}
/* Kaari on laatikkoa isompi: sydämet kulkevat sen ympäri. */
.siirtyma-kaari{width:100%;height:100%;
  animation:siirtyma-kierto 2.6s linear infinite}
/* Laatikko mahtuu kaaren sisälle: 300 px:n kehyksessä kaaren sydämet ovat
   säteellä ~122 px, joten laatikon halkaisija 58 % jättää väliin ilmaa. */
.siirtyma-boksi{width:54%;height:54%;
  animation:siirtyma-zoom .42s cubic-bezier(.2,1.3,.4,1) both}
@keyframes siirtyma-kierto{to{transform:rotate(360deg)}}
@keyframes siirtyma-zoom{from{transform:scale(.45);opacity:0}}
/* ⚠️ Liikkeen vähennys on asetus eikä makuasia: kierto pysähtyy, laatikko
   tulee ilman zoomia. Peite ja sen tehtävä (valkoisen välähdyksen kattaminen)
   säilyvät. */
@media (prefers-reduced-motion:reduce){
  .siirtyma-kaari{animation:none}
  .siirtyma-boksi{animation:siirtyma-zoom .01s both}
}