/* ===================== peli.css =====================
 *
 * Kaksi ruutua: eteinen ja peli. Molemmat noudattavat samaa kolmea sääntöä, ja ne ovat
 * täällä eivätkä komponenteissa, koska laite on tabletti ja pelaaja on lapsi:
 *
 *   - Kosketuskohde on vähintään 56 px. Aikuisen 44 px on pienelle sormelle vähän.
 *   - Teksti on isoa ja rivi lyhyt. Ohjekortti ON tehtävä; jos se on vaikea lukea,
 *     peli ei toimi, vaikka kaikki koodi toimisi.
 *   - Mikään ei ole harmaata harmaalla. Kontrasti on osa luettavuutta.
 * ================================================================================ */

:root {
  --muste: #33241a;
  --muste-hento: #6d5544;
  --kerma: #fff8ec;
  --kortti: rgba(255, 250, 240, 0.96);
  --kulta: #f0a92b;
  --kulta-tumma: #c9821a;
  --vihrea: #4f9d4b;
  --korall: #e2664c;
  --varjo-l: 0 2px 6px rgba(60, 38, 20, 0.10);
  --varjo-m: 0 10px 26px rgba(60, 38, 20, 0.16);
  --varjo-s: 0 22px 60px rgba(60, 38, 20, 0.28);
  --kaari: 26px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* `hidden` on tässä tiedostossa reititys: eteinen, pelin käyttöliittymä ja latausruutu
   piilotetaan sillä. Selaimen oma [hidden] on pelkkä `display: none` ilman tärkeyttä,
   joten mikä tahansa alempi `display: flex` kumoaa sen hiljaa — ja piilotettu ruutu jää
   päälle näyttäen siltä, että peli jumitti latausruudulle. Näin kävi. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%;
  overflow: hidden;
  background: #f1e0c4;
  color: var(--muste);
  font-family: "Nunito", system-ui, -apple-system, sans-serif;
  font-size: 16px;                    /* alle 16 px saa iOS:n zoomaamaan sivun */
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; cursor: pointer; }

/* Oma fokusrengas. Selaimen sininen oletus on ainoa asia koko käyttöliittymässä, joka ei
   ole tämän pelin väriä, ja se osuu näkyviin juuri voittoruudussa: Seuraava-nappi saa
   fokuksen ohjelmallisesti, jotta välilyönti ja Enter jatkavat peliä. */
:focus-visible { outline: 3px solid var(--kulta-tumma); outline-offset: 3px; border-radius: 999px; }

/* KANKAALLA EI OLE FOKUSRENGASTA EIKÄ KAARTA, ja jälkimmäinen on korjaus. Babylon antaa
   canvakselle tabIndexin ja kutsuu `focus()`:ia jokaisesta painalluksesta, ja
   kosketuslaitteella ohjelmallinen fokus osuu `:focus-visible`een — hiiri ei osu.
   `outline: none` oli jo tässä, mutta `border-radius: 999px` ei ollut: se tuli yllä
   olevasta säännöstä ja leikkasi koko pelin pyöreäksi ikkunaksi, jonka kulmissa näkyi
   sivun tausta. Ruudun kokoisella elementillä 999 px on ympyrä. Peli näytti hajoavan
   puhelimella ensimmäisestä sormen kosketuksesta eikä koskaan tietokoneella, ja syy oli
   fokusrengas, jota ei edes näytetä. */
#render {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block; outline: none; border-radius: 0;
  opacity: 0; transition: opacity 400ms ease;
  touch-action: none;
}
#render.nakyy { opacity: 1; }

/* ---------- yleinen nappi ---------- */

.nappi {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 56px; padding: 0 22px;
  border: none; border-radius: 999px;
  background: var(--kortti);
  font-family: "Baloo 2", "Nunito", sans-serif;
  font-weight: 700; font-size: 19px;
  box-shadow: var(--varjo-m), inset 0 -3px 0 rgba(120, 80, 40, 0.14);
  transition: transform 130ms ease, box-shadow 130ms ease, filter 130ms ease;
}
.nappi:active { transform: translateY(2px) scale(0.985); box-shadow: var(--varjo-l); }
.nappi svg { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.nappi.iso { min-height: 66px; padding: 0 34px; font-size: 23px; background: var(--kulta); color: #422c10; }
.nappi.hento { background: transparent; box-shadow: none; color: var(--muste-hento); font-size: 17px; min-height: 48px; }
.nappi.himmea { opacity: 0.45; }
.nappi.mykka { background: #efe2cd; color: var(--muste-hento); }

/* ---------- eteinen ---------- */

#hub {
  position: fixed; inset: 0;
  overflow-y: auto;
  background: linear-gradient(rgba(255, 240, 215, 0.35), rgba(255, 226, 186, 0.65)), url("../art/hub-bg.jpg") center / cover no-repeat;
  opacity: 0; transition: opacity 420ms ease;
}
#hub.nakyy { opacity: 1; }

.hub-sisus {
  min-height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  gap: 30px; padding: 34px max(20px, env(safe-area-inset-left)) 40px;
}

.hub-otsikko { text-align: center; }
.hub-otsikko h1 {
  margin: 0;
  font-family: "Baloo 2", sans-serif; font-weight: 800;
  font-size: clamp(38px, 7vw, 68px); line-height: 1.05;
  color: #fffaf0;
  /* Kaksi varjoa: pehmeä syvyys ja terävä ääriviiva, jotta otsikko kestää minkä tahansa
     kohdan taustamaalauksesta allaan. */
  text-shadow: 0 3px 0 rgba(120, 74, 30, 0.55), 0 14px 34px rgba(90, 55, 20, 0.45);
}
.hub-otsikko p {
  margin: 10px 0 0; font-size: clamp(16px, 2.2vw, 21px); font-weight: 700;
  color: #6b4a22; text-shadow: 0 1px 0 rgba(255, 250, 235, 0.7);
}

.paneelit {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  width: min(1120px, 100%); margin: 0 auto;
}

.paneeli {
  position: relative;
  display: flex; flex-direction: column;
  padding: 0; border: none; overflow: hidden;
  border-radius: var(--kaari);
  background: var(--kortti);
  box-shadow: var(--varjo-s);
  transition: transform 200ms cubic-bezier(.2,.9,.3,1.2), box-shadow 200ms ease;
  text-align: left;
}
.paneeli:hover:not(.lukossa) { transform: translateY(-6px) scale(1.015); }
.paneeli:active:not(.lukossa) { transform: translateY(-1px) scale(0.995); }

.paneeli-kuva {
  display: block; aspect-ratio: 3 / 4;
  background-size: cover; background-position: center 32%;
}
.paneeli.lukossa .paneeli-kuva { filter: saturate(0.45) brightness(0.88); }

.paneeli-jalka {
  display: grid; grid-template-columns: 1fr auto;
  column-gap: 12px; align-items: start;
  padding: 15px 18px 18px;
}
.paneeli-nimi {
  grid-column: 1;
  display: block; font-family: "Baloo 2", sans-serif; font-weight: 800;
  font-size: 25px; line-height: 1.1;
}
.paneeli-kuvaus { grid-column: 1; display: block; margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--muste-hento); }
/* Ikä on aikuisen tieto lapsen kuvan vieressä: hiljainen mutta luettava, eikä kilpaile
   nimen kanssa. Se on nimen rivillä eikä kuvan päällä, koska kuva on lapsen. */
.ika {
  grid-column: 2; grid-row: 1;
  padding: 7px 13px; border-radius: 999px;
  background: #f2e4ca; color: var(--muste-hento);
  font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 16px;
  white-space: nowrap;
}

.merkki, .oppi {
  position: absolute; top: 14px;
  padding: 7px 14px; border-radius: 999px;
  font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 14px;
  box-shadow: var(--varjo-l);
}
.merkki { right: 14px; background: var(--kulta); color: #422c10; }
.oppi { left: 14px; background: rgba(255, 250, 240, 0.94); color: var(--muste-hento); }

/* ---------- pelin käyttöliittymä ---------- */

#peli-ui {
  position: fixed; inset: 0;
  pointer-events: none;                 /* vain napit ja kortit ottavat kosketuksen */
  padding: max(14px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
#peli-ui .nappi, #peli-ui .voittoruutu { pointer-events: auto; }

/* Yläreunan kaksi asiaa alkavat samalta riviltä. `center` keskitti Takaisin-napin
   oikean puolen PINOON eikä tähtipalkkiin: kun löytölista ilmestyi kellon alle, pino
   kasvoi kolminkertaiseksi ja nappi valui puhelimessa ruudun puoliväliin, kauas siitä
   palkista, jonka rinnalla sen kuuluu olla. Ylälaita on ylälaita molemmilla puolilla. */
.yla { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

/* Kierroksen tähdet: yksi kutakin tehtävää kohden, tyhjät näkyvissä alusta asti. Tyhjä
   tähti kertoo, montako on jäljellä — se on sama tieto kuin numero, mutta sen näkee
   lukematta, ja lukemisen tässä pelissä tekee ohjekortti eikä laskuri. */
.tahtipalkki {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 14px; border-radius: 999px;
  background: var(--kortti); box-shadow: var(--varjo-m);
}
.tahtirivi { display: flex; align-items: center; gap: 5px; }
.tahti { display: flex; }
.tahti svg {
  display: block;
  fill: rgba(122, 84, 38, 0.13); stroke: rgba(122, 84, 38, 0.26);
  stroke-width: 1.4; stroke-linejoin: round;
  transition: fill 260ms ease, stroke 260ms ease;
}
.tahti.tayttyi svg { fill: var(--kulta); stroke: var(--kulta-tumma); }
/* Menetetty tähti: pelattu tehtävä, josta ei tullut tähteä (Sanapihan toinen erehdys).
   Se ei ole punainen eikä rasti — se on tyhjä paikka, jonka reuna on piirretty niin
   että sen erottaa vielä tulevasta. Rangaistuksen näköinen merkki opettaisi pelkäämään
   painamista, ja pelkäävä lapsi lakkaa lukemasta ja alkaa arvata. */
.tahti.menetetty svg { fill: none; stroke: rgba(122, 84, 38, 0.45); stroke-dasharray: 2.6 2.4; }
.tahti.syttyy { animation: tahtiPomppu 520ms cubic-bezier(.2, .9, .3, 1.5); }

/* Kapealla ruudulla ylärivi on kaksi asiaa yhdellä rivillä, ja se rivi on 390 px pitkä:
   Takaisin, kello ja viisi tähteä. Täysikokoisina ne ovat noin 430 px, ja ylimäärä
   otetaan siitä osasta, joka joustaa — puhelimessa se oli kello, joka taittui kahdelle
   riville. Tähti on merkki eikä teksti, ja pienempänäkin sen näkee lukematta; kutistuva
   tähtirivi on siksi oikea paikka antaa periksi. */
@media (max-width: 560px) {
  .tahtipalkki { gap: 8px; padding: 0 11px; min-height: 50px; }
  .tahtirivi { gap: 4px; min-width: 0; }
  /* Tähti antaa periksi viimeisenä ja vähän: kello on `nowrap` ja Takaisin on sana,
     joten ahtaassa paikassa tämä on ainoa, joka voi kutistua rikkoutumatta. Ilman
     `flex`iä ja `max-width`iä tähdet valuisivat palkkinsa ulkopuolelle silloin, kun
     kello on pisimmillään ("12:34"). */
  .tahti { flex: 0 1 auto; min-width: 0; }
  .tahti svg { width: 23px; height: 23px; max-width: 100%; }
  /* Takaisin: sama nappi, pienempi pehmuste. Sana pysyy — se on ainoa uloskäynti, ja
     pelkkä nuoli on aikuisen merkki. */
  .takaisin { padding: 0 14px; font-size: 18px; }
}

.ohjekortti {
  pointer-events: auto;
  width: min(760px, 100%);
  padding: 18px 22px; border-radius: var(--kaari);
  background: var(--kortti);
  box-shadow: var(--varjo-s), inset 0 -4px 0 rgba(120, 80, 40, 0.10);
}
/* Kortissa on vain ohje. Tässä oli myös Kuuntele-nappi, ja sen poistaminen on tämän
   pelin sääntö eikä siivousta: ks. ui.js. */
.ohje-teksti {
  margin: 0;
  font-family: "Baloo 2", sans-serif; font-weight: 700;
  font-size: clamp(21px, 3.3vw, 32px); line-height: 1.24;
  letter-spacing: 0.005em;
}

/* Yhden sanan ohje. Sanapihassa kortissa lukee vain se sana, jota etsitään, eikä
   kortissa ole mitään muuta, mistä koko veisi tilaa. Iso teksti ei ole korostus vaan
   mittakaava: sana, jota luetaan kirjain kerrallaan, luetaan isona. Leveys kutistuu
   sisältöön, jotta kortti on sanan kokoinen eikä ruudun levyinen laatikko, jossa on
   sana. */
.ohjekortti.sana {
  width: auto; max-width: 100%;
  padding: 8px 36px; text-align: center;
}
.ohjekortti.sana .ohje-teksti {
  font-size: clamp(38px, 7.5vw, 72px); line-height: 1.12; letter-spacing: 0.01em;
}
.vihjekortti.sana { text-align: center; width: auto; max-width: 100%; padding: 8px 24px; }
/* Tavutettu sana: väliviiva on osa vihjettä, joten sen ympärillä on ilmaa. */
.vihjekortti.sana .vihje-teksti {
  font-size: clamp(22px, 4vw, 34px); letter-spacing: 0.05em;
}

.vihjekortti {
  width: min(620px, 100%);
  padding: 13px 20px; border-radius: 20px;
  background: rgba(255, 240, 208, 0.96);
  border-left: 7px solid var(--kulta);
  box-shadow: var(--varjo-m);
}
.vihje-otsikko {
  display: block; font-family: "Baloo 2", sans-serif; font-weight: 800;
  font-size: 14px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--kulta-tumma);
}
.vihje-teksti { margin: 3px 0 0; font-size: clamp(17px, 2.4vw, 21px); font-weight: 700; }

/* Toimintonappi: poimi, jätä matolle, laske maahan. Sormella pelattaessa tämä on ainoa
   tapa tehdä se, jonka näppäimistö tekee välillä ja ohjain A:lla, joten se on ruudun
   isoin nappi ja aina samassa paikassa — liikkuva nappi on nappi, jota etsitään. */
.toiminto {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(20px, env(safe-area-inset-bottom));
  min-height: 68px; padding: 10px 30px; font-size: 21px;
  line-height: 1.15;
  background: var(--kerma);
  /* Napissa lukee maan nimi, ja maan nimi voi olla "Kongon demokraattisesta
     tasavallasta". Keskitettynä ja rajattomana se liukuisi zoomipainikkeiden alle
     pystyruudulla — leveysraja jättää niille tilan ja teksti taittuu kahdelle riville.
     `min-width: 0` on pakollinen: flex-lapsi ei kutistu sisältönsä alle ilman sitä. */
  max-width: calc(100vw - 300px);
  text-align: center;
}
/* `min-width: 0` päästää tekstin taittumaan; `break-word` on se, mitä tehdään kun
   taitettavaa ei ole. "Kongon demokraattisessa tasavallassa" on yksi 16 kirjaimen sana,
   joka on pienellä puhelimella leveämpi kuin nappi mahtuu olemaan zoomipainikkeiden ja
   kulkuneuvonapin välissä — ja ilman tätä se ei taittunut vaan valui napin ulkopuolelle
   zoomipainikkeiden päälle. Katkaisu on merkitön (ei tavuviivaa): tässä talossa tavutus
   on taulukko eikä sääntö, eikä selaimen arvaus saa opettaa lapselle väärää tavurajaa. */
.toiminto .toiminto-teksti { min-width: 0; overflow-wrap: break-word; }
.toiminto:active { transform: translateX(-50%) translateY(2px) scale(0.985); }
.toiminto .toiminto-kuva { display: flex; flex: none; }
/* Himmeä nappi ei ole rikki vaan odottaa: lähellä ei ole mitään poimittavaa. Se pysyy
   painettavana, koska nappi joka ei reagoi lainkaan opettaa, ettei sitä kannata painaa. */
.toiminto.himmea { opacity: 0.5; }

/* ---------- kulkuneuvonappi ---------- *
 * Vasemmassa alakulmassa, zoomipainikkeita vastapäätä: toisella puolella on se, miten
 * maailmaa katsotaan, ja tällä puolella se, miten siinä liikutaan. Tehtävä tehdään
 * keskellä, eikä kumpikaan reuna saa olla yhtä painava kuin se.
 *
 * Nappi on toimintonappia matalampi mutta yhä yli 56 px: se on lapsen sormelle eikä
 * aikuisen hiirelle, ja sitä painetaan kesken matkan. */
.kulkunappi {
  position: fixed; left: max(16px, env(safe-area-inset-left));
  bottom: max(20px, env(safe-area-inset-bottom));
  min-height: 58px; padding: 0 20px; font-size: 18px;
  background: var(--kortti);
  color: var(--muste);
}
.kulkunappi .kulku-kuva { display: flex; flex: none; }

/* ---------- onnittelu ---------- *
 * Kulmassa, ei keskellä, ja katoaa itsestään. Peli ei pysähdy onnistumiseen: seuraava
 * ohje on jo ruudulla, kun tämä vielä näkyy. */
.onnittelu {
  position: fixed; right: 16px;
  bottom: max(20px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px;
  padding: 13px 20px; border-radius: 999px;
  background: var(--kerma);
  box-shadow: var(--varjo-s);
  font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 20px;
}
.onnittelu svg { fill: var(--kulta); stroke: var(--kulta-tumma); stroke-width: 1.3; stroke-linejoin: round; }
/* "Voi ei": sama kortti samassa kulmassa, ja tähti on tyhjä. Kortti kertoo mitä
   tapahtui — että tähti jäi tulematta — eikä siitä tehdä tapahtumaa, joka pysäyttää
   pelin. Ks. ui.js `onnittelu`. */
.onnittelu.harmi { background: #f4ece0; }
.onnittelu.harmi svg { fill: none; stroke: var(--muste-hento); stroke-dasharray: 2.6 2.4; }
.onnittelu.saapuu { animation: tahtiPomppu 460ms cubic-bezier(.2, .9, .3, 1.5); }

/* ---------- voitto ---------- */

.voittoruutu {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(52, 32, 14, 0.42);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.voittolaatikko {
  width: min(460px, 88vw); padding: 30px 28px 26px;
  border-radius: 34px; text-align: center;
  background: var(--kerma);
  box-shadow: var(--varjo-s);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.voittotahdet { display: flex; align-items: center; gap: 10px; }
.voittotahdet svg { fill: var(--kulta); stroke: var(--kulta-tumma); stroke-width: 1.2; stroke-linejoin: round; }
/* Kolme tähteä yksi kerrallaan: palkinto, joka ilmestyy kerralla, ei ehdi tuntua
   palkinnolta. */
.voittoruutu.saapuu .voittotahdet svg { animation: tahtiPomppu 520ms cubic-bezier(.2,.9,.3,1.5) backwards; }
.voittoruutu.saapuu .voittotahdet svg:nth-child(1) { animation-delay: 60ms; }
.voittoruutu.saapuu .voittotahdet svg:nth-child(2) { animation-delay: 220ms; }
.voittoruutu.saapuu .voittotahdet svg:nth-child(3) { animation-delay: 380ms; }
.voitto-otsikko {
  margin: 0; font-family: "Baloo 2", sans-serif; font-weight: 800;
  font-size: 40px; line-height: 1;
}
.voitto-teksti { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--muste-hento); }

/* ---------- lataus ---------- */

#lataus {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #ffe9c6, #f7cf9c);
}
.lataus-sisus { text-align: center; font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 20px; color: #7a5426; }
.lataus-pallo {
  width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--kulta); box-shadow: var(--varjo-m);
  animation: pomppu 900ms ease-in-out infinite;
}

/* ---------- liike ---------- */

@keyframes pomppu { 0%, 100% { transform: translateY(0) scaleY(1); } 45% { transform: translateY(-22px) scaleY(1.08); } 55% { transform: translateY(-22px) scaleY(1.08); } 90% { transform: translateY(0) scaleY(0.88); } }
@keyframes saapuu { from { opacity: 0; transform: translateY(-14px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes hupsis { 0%, 100% { transform: translateX(0) rotate(0); } 20% { transform: translateX(-9px) rotate(-1deg); } 45% { transform: translateX(8px) rotate(1deg); } 70% { transform: translateX(-5px) rotate(-0.5deg); } }
@keyframes tahtiPomppu { from { opacity: 0; transform: scale(0.3) rotate(-25deg); } to { opacity: 1; transform: none; } }

.saapuu { animation: saapuu 380ms cubic-bezier(.2,.9,.3,1.2); }
.ohjekortti.hupsis { animation: hupsis 420ms ease; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 1ms !important; transition-duration: 60ms !important; }
}

/* Kapealla ruudulla onnittelu ei mahdu toimintonapin viereen, joten se menee sen
   yläpuolelle. Nappi on se, jonka paikka ei saa muuttua. */
@media (max-width: 560px) {
  .onnittelu { right: 50%; transform: translateX(50%); bottom: max(96px, calc(env(safe-area-inset-bottom) + 84px)); }
}

/* Kapealla ruudulla maan nimi tarvitsee kaiken tilan, jonka voi saada, joten
   kulkuneuvonapista jää pelkkä kuvake. Teksti on tabletin — se on tämän pelin laite — ja
   kuvake on se, joka mahtuu aina. Raja on 700 px eikä 560: kaksi nappia ja "Kongon
   demokraattisesta tasavallasta" niiden välissä osuivat toisiinsa jo paljon ennen
   puhelimen leveyttä. */
@media (max-width: 700px) {
  .kulkunappi span:not(.kulku-kuva) { display: none; }
  .kulkunappi { padding: 0; width: 58px; justify-content: center; }
  .toiminto { max-width: calc(100vw - 190px); }
}

/* Puhelin: "Valitse Iran" taittui kahdelle riville, ja se on kahden sanan nappi. Alalaita
   on kolme asiaa yhdellä rivillä — kulkuneuvo, toiminto, zoomi — ja niiden väliin jäävä
   tila on tässä 218 px. Nappi saa siitä kaiken, mikä ei ole reunaa tai rakoa (kaksi
   58 px:n nappia ja reilut 10 px joka väliin), ja loput otetaan omasta pehmusteesta:
   30 px:n kylkiä ei tarvita, kun nappi on melkein ruudun levyinen. Sama 15 px:n kylki
   antaa Sanapihassa tilaa korille, joka on samalla rivillä vasemmalla. Teksti pysyy
   19 px:ssä ja korkeus 68:ssa — nappi on se, jota painetaan koko peli, eikä se saa
   kutistua sormen alta.
   Pitkä maannimi taittuu yhä, ja se on oikein: kaksi riviä on hinta, jonka "Kongon
   demokraattisesta tasavallasta" maksaa, eikä sitä pidä maksaa "Iranista". */
@media (max-width: 480px) {
  .toiminto {
    max-width: calc(100vw - 172px);
    padding: 8px 15px; font-size: 19px; gap: 7px;
  }
}

/* Matala vaakaruutu: ohjekortti litistyy, jotta kenttä pysyy näkyvissä. Tämä on se
   asento, jossa tablettia pidetään, joten se ei ole reunatapaus. */
@media (max-height: 520px) {
  .ohjekortti { padding: 12px 16px; }
  .ohje-teksti { font-size: clamp(18px, 2.6vw, 24px); }
  /* Matalalla ruudulla yhden sanan kortti pysyy isona — se on koko tehtävä — mutta kaksi
     korttia päällekkäin vie tässä pystysuunnan, jota kentällä ei ole varaa menettää. */
  .ohjekortti.sana { padding: 4px 28px; }
  .ohjekortti.sana .ohje-teksti { font-size: clamp(30px, 5.5vw, 46px); }
  .vihjekortti.sana { padding: 5px 20px; }
  .vihjekortti.sana .vihje-teksti { font-size: clamp(19px, 3.2vw, 26px); }
  .nappi { min-height: 48px; padding: 0 16px; font-size: 17px; }
  /* Toimintonappi ei kutistu muiden mukana: se on se, jota painetaan koko peli. */
  .toiminto { min-height: 58px; padding: 0 24px; font-size: 19px; }
  .tahti svg { width: 24px; height: 24px; }
  .hub-sisus { padding-top: 20px; }
}

/* ---------- zoomi ---------- *
 * Yksi kapea pilleri: plus, rata ja miinus. Rata on se, mikä tekee tästä muutakin kuin
 * kaksi nappia — nuppi näyttää missä zoomi on, ja siitä voi vetää. Kaksi irrallista
 * varjollista pallonpuolikasta nurkassa näytti kahdelta rikkinäiseltä napilta.
 * Oikeassa alakulmassa, toimintonapin sivussa — keskellä oleva nappi on se, jolla
 * tehtävä tehdään, eikä sen viereen saa ilmestyä toista yhtä painavaa.
 *
 * `touch-action: none` on pakollinen: ilman sitä selain lukee painalluksen vierityksen
 * aluksi, lähettää `pointercancel`in ja zoomi lakkaa kesken pidon. */
.zoomrivi {
  position: fixed; right: max(16px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center;
  width: 48px; padding: 4px 0;
  border-radius: 999px;
  background: var(--kortti);
  box-shadow: var(--varjo-m), inset 0 -3px 0 rgba(120, 80, 40, 0.12);
  pointer-events: auto;
}
.zoomnappi {
  width: 40px; height: 40px; min-height: 40px; padding: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  touch-action: none;
  color: var(--muste-hento);
  justify-content: center;
}
.zoomnappi svg { fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; }
.zoomnappi:active { transform: none; background: rgba(120, 80, 40, 0.10); color: var(--muste); }
.zoomnappi:hover { color: var(--muste); }
/* Rata: ohut ura ja kultainen nuppi. Nupin paikka on `--z` (0 = ylhäällä = lähin),
   ja peli päivittää sen joka ruudulla. Leveä osuma-alue, kapea kuva. */
.zoomrata {
  position: relative; width: 40px; height: 92px; margin: 2px 0;
  touch-action: none; cursor: pointer;
}
.zoomura {
  position: absolute; left: 50%; top: 6px; bottom: 6px; width: 4px;
  transform: translateX(-50%);
  border-radius: 2px; background: rgba(120, 80, 40, 0.22);
}
.zoomnuppi {
  --z: 0.5;
  position: absolute; left: 50%; top: calc(6px + (100% - 12px) * var(--z));
  width: 18px; height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--kulta);
  box-shadow: 0 0 0 2.5px var(--kortti), 0 2px 6px rgba(60, 38, 20, 0.28), inset 0 -2px 0 var(--kulta-tumma);
  pointer-events: none;
}

/* Matalalla vaakaruudulla rata lyhenee kuten napitkin. */
@media (max-height: 560px) {
  .zoomrata { height: 64px; }
  .kulkunappi { min-height: 50px; padding: 0 16px; font-size: 17px; }
}

/* ---------- kartta-asettelu ---------- *
 * Maailmanmatkassa ohjekortti on VASEMMASSA LAIDASSA eikä keskellä. Keskellä on
 * kartta, ja ohje käskee lukemaan sitä: kortti keskellä peitti juuri sen, mitä
 * katsotaan, ja Skandinavia oli kortin takana. Kortti on yhä aina ruudulla (ks.
 * CLAUDE.md: ohjekortti ON tehtävä), pienemmällä kirjaimella ja kapeampana, jotta
 * ruudun keskiosa jää vapaaksi. Vihje seuraa sen alle. Pystyruudulla kortti on
 * ylhäällä täysleveänä kuten ennenkin — kapea kortti olisi siellä korkea kaistale. */
#peli-ui.kartta .ohjekortti,
#peli-ui.kartta .vihjekortti { align-self: flex-start; width: min(400px, 40vw); }
#peli-ui.kartta .ohjekortti { padding: 14px 18px; }
#peli-ui.kartta .ohje-teksti { font-size: clamp(17px, 1.9vw, 22px); line-height: 1.28; }
@media (orientation: portrait) {
  #peli-ui.kartta .ohjekortti,
  #peli-ui.kartta .vihjekortti { align-self: center; width: min(760px, 100%); }
  #peli-ui.kartta .ohjekortti { padding: 12px 16px; }
  #peli-ui.kartta .ohje-teksti { font-size: clamp(17px, 4.2vw, 22px); }
}

/* ---------- pelaajan valinta ---------- *
 * Nappi eteisen yläkulmassa, ja sen sisällä hahmo eikä kuvake: lapsi tunnistaa itsensä
 * kuvasta, ja nimi on sen vieressä eikä sen sijasta. Ruutu avautuu napista eikä ole
 * pelin edessä — peliin pääsee valitsematta ketään. */
/* Yläkulman napit rivissä: oma hahmo ja oma hylly. Kaksi nappia eikä valikkoa — kumpikin
   on lapsen omaa tavaraa, ja kumpikin on kuva. */
.ylanapit {
  position: absolute; top: max(14px, env(safe-area-inset-top)); right: 18px;
  display: flex; align-items: center; gap: 10px;
}
.pelaajanappi {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 60px; padding: 0 20px 0 12px;
  border: none; border-radius: 999px;
  background: var(--kortti);
  box-shadow: var(--varjo-m), inset 0 -3px 0 rgba(120, 80, 40, 0.14);
  font-family: "Baloo 2", "Nunito", sans-serif; font-weight: 700; font-size: 18px;
  color: var(--muste);
  cursor: pointer;
}
.pelaajanappi:active { transform: translateY(2px); }
.pelaajanappi svg { display: block; }

.pelaajaruutu, .korihylly {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(40, 26, 14, 0.55);
}
.pelaajalaatikko, .korilaatikko {
  width: min(760px, 100%); max-height: 92vh; overflow: auto;
  padding: 26px 26px 22px; border-radius: var(--kaari);
  background: var(--kerma);
  box-shadow: var(--varjo-s);
  text-align: center;
}
.pelaajalaatikko h2, .korilaatikko h2 {
  margin: 0 0 18px; font-family: "Baloo 2", sans-serif; font-size: 30px; color: var(--muste);
}
.korilaatikko h2 { display: flex; align-items: center; justify-content: center; gap: 10px; }
.korilaatikko h2 svg { fill: none; stroke: var(--kulta-tumma); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.pelaajalista { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 18px; }

/* Kortti on kuva ja nimi, ja kuva on iso: sama sääntö kuin eteisen paneelissa. */
.pelaajakortti {
  position: relative;
  width: 132px; min-height: 168px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 8px; border: none; border-radius: 22px;
  background: var(--kortti);
  box-shadow: var(--varjo-m);
  cursor: pointer;
}
.pelaajakortti.valittu { box-shadow: var(--varjo-m), 0 0 0 4px var(--kulta); }
.pelaajavalinta {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
}
.pelaajanimi {
  font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 18px; color: var(--muste);
  max-width: 116px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pelaajamuokkaa {
  position: absolute; top: 6px; right: 6px;
  width: 40px; height: 40px; padding: 0;
  border: none; border-radius: 50%;
  background: rgba(120, 80, 40, 0.10);
  cursor: pointer;
}
.pelaajamuokkaa svg { fill: none; stroke: var(--muste-hento); stroke-width: 2; stroke-linecap: round; }
.pelaajakortti.uusi { background: #f2e4ca; }
.uusikuva {
  display: flex; align-items: center; justify-content: center;
  width: 78px; height: 104px;
}
.uusikuva svg { fill: none; stroke: var(--muste-hento); stroke-width: 2.4; stroke-linecap: round; }

/* ---------- hahmon teko ---------- */
.tekija { display: flex; gap: 22px; align-items: center; justify-content: center; flex-wrap: wrap; }
.tekijakuva {
  flex: none; width: 160px; height: 200px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 22px; background: var(--kortti); box-shadow: var(--varjo-l);
}
.tekijavalinnat { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.varirivi { display: flex; align-items: center; gap: 8px; }
.variotsikko {
  width: 78px; text-align: right; flex: none;
  font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 16px; color: var(--muste-hento);
}
/* Värinapit ovat pienempiä kuin 56 px, ja se on tietoinen poikkeus: ne ovat rivissä
   kuusi, ne osuvat vierekkäin eikä väärä valinta maksa mitään — sen näkee heti kuvasta
   ja korjaa yhdellä painalluksella. */
.varinappi {
  width: 42px; height: 42px; padding: 0;
  border: 3px solid transparent; border-radius: 50%;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
  cursor: pointer;
}
.varinappi.valittu { border-color: var(--muste); transform: scale(1.08); }

.nimikentta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 18px 0 6px;
  font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 18px; color: var(--muste-hento);
}
/* Oma kenttä eikä selaimen oletus, ja 18 px: alle 16 px:n teksti saa iOS:n zoomaamaan
   kesken kirjoittamisen. */
.nimisyote {
  min-height: 56px; width: min(280px, 60vw);
  padding: 0 18px; border: 3px solid rgba(120, 80, 40, 0.22); border-radius: 999px;
  background: var(--kortti);
  font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 20px; color: var(--muste);
}
.nimisyote:focus { outline: none; border-color: var(--kulta); }
.tekijanapit { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }

@media (max-width: 560px) {
  .pelaajanappi span { display: none; }
  .pelaajanappi { padding: 0 12px; }
  .tekijakuva { width: 120px; height: 150px; }
}

/* ---------- kello ja löytölista ---------- *
 * Kello on tähtirivin sisällä eikä omana laatikkonaan: ne kertovat samasta kierroksesta,
 * ja kaksi erillistä laatikkoa yläkulmassa on kaksi asiaa katsottavaksi. Lista on niiden
 * alla, ja sen paikat ovat tyhjinä näkyvissä — sama kuin tähtirivi: näkee montako on
 * tulossa ilman että numeroa luetaan. */
.ylaoikea { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 0; }
/* Kello ei taitu koskaan. Ilman `nowrap` "27 s" katkesi puhelimessa kahdelle riville —
   luku ylös ja yksikkö sen alle — koska tähtipalkki oli ahtaalla ja kello oli sen ainoa
   kutistuva osa. Kaksiriviseksi taittunut kello ei ole kello vaan kaksi merkkiä. */
.kello {
  flex: none; white-space: nowrap;
  font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 19px;
  color: var(--muste-hento);
  font-variant-numeric: tabular-nums;
}
/* Avaruusrallissa kello on lähtölaskenta, ei kierroksen mittanauha. Viimeiset sekunnit
 * vaihtavat sävyn ja sykkivät juuri sen verran, että kiire näkyy ilman punaista virhettä. */
.kello.kiire { color: #c94d46; animation: avaruusKiire 650ms ease-in-out infinite alternate; }
@keyframes avaruusKiire { to { transform: scale(1.12); } }
.loytolista {
  list-style: none; margin: 0; padding: 8px 10px;
  width: 210px; max-width: 42vw;
  border-radius: 18px;
  background: var(--kortti); box-shadow: var(--varjo-m);
  pointer-events: none;
}
.loyto {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 26px; padding: 2px 4px;
  font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 15px;
  color: var(--muste);
}
.loyto + .loyto { border-top: 1px solid rgba(120, 80, 40, 0.13); }
.loyto-nimi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.loyto-aika { flex: none; color: var(--muste-hento); font-variant-numeric: tabular-nums; }
/* Tyhjä paikka on viiva eikä tyhjä rivi: rivi, jossa ei ole mitään, näyttää siltä että
   lista loppui siihen. */
.loyto.tyhja::before {
  content: ""; display: block; width: 100%; height: 3px; border-radius: 999px;
  background: rgba(120, 80, 40, 0.13);
}

/* ---------- voittoruudun aika ja ennätykset ---------- */
.voitto-lisa { margin: 4px 0 14px; }
.voitto-aika {
  font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 34px; color: var(--muste);
  font-variant-numeric: tabular-nums;
}
.voitto-ennatys { font-size: 17px; font-weight: 700; color: var(--kulta-tumma); }
.ennatyslista { list-style: none; margin: 12px auto 0; padding: 0; max-width: 340px; text-align: left; }
.ennatysrivi {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px; border-radius: 14px;
  font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 17px; color: var(--muste);
}
.ennatysrivi.oma { background: rgba(240, 169, 43, 0.18); }
.ennatysrivi .sija { width: 22px; color: var(--muste-hento); }
.ennatysrivi .nimi { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ennatysrivi .aika { font-variant-numeric: tabular-nums; color: var(--muste-hento); }

@media (max-width: 620px) {
  .loytolista { width: 156px; padding: 6px 8px; }
  .loyto { font-size: 13px; min-height: 22px; }
}


/* ---------- kori ---------- *
 * Kori on tässä pelissä palkinto eikä laskuri: siihen jää se, minkä lapsi luki ja löysi
 * itse, kuvana ja sanana vierekkäin. Kaksi asiaa pitävät sen palkintona:
 *
 * KORISSA ON VAIN JO LÖYTYNYT. Tyhjä paikka on viiva eikä kuva — sama kuin tähtirivissä
 * ja löytölistassa. Kori, joka näyttäisi kierroksen sanat etukäteen, olisi viisi
 * vastausta ruudun laidassa.
 *
 * KORI EI OTA KOSKETUSTA. Se ei ole nappi eikä valikko: pelin aikana se on nähtävä eikä
 * tutkittava, ja tutkittavaksi se avautuu vasta eteisen hyllyssä.
 *
 * Vasemmassa alalaidassa: toimintonappi on keskellä ja zoomi oikealla, ja kori on niitä
 * kevyempi — se ei ole tekemistä vaan tulosta. Sisältö kasvaa alhaalta ylöspäin
 * (`column-reverse`), koska kori täyttyy pohjalta. */
.kori {
  position: fixed; left: max(14px, env(safe-area-inset-left));
  bottom: max(20px, env(safe-area-inset-bottom));
  width: 138px;
  display: flex; flex-direction: column;
  padding: 8px 8px 4px; border-radius: 20px;
  background: var(--kortti);
  box-shadow: var(--varjo-m), inset 0 -3px 0 rgba(120, 80, 40, 0.12);
  pointer-events: none;
}
.kori-paikat { display: flex; flex-direction: column-reverse; gap: 4px; }
.kori-paikka {
  display: flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 2px 4px; border-radius: 14px;
  background: rgba(120, 80, 40, 0.06);
}
.kori-paikka.saapuu { animation: koriPomppu 520ms cubic-bezier(.2, .9, .3, 1.5); }
.kori-kuva { width: 36px; height: 36px; flex: none; display: block; }
/* Sana on 17 px eikä pienempi: se on luettava, ja luettu sana on koko syy siihen, että
   kuva on korissa. */
.kori-sana {
  font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 17px; color: var(--muste);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* Tyhjä paikka on viiva eikä tyhjä laatikko — sama ratkaisu kuin löytölistassa: rivi,
   jossa ei ole mitään, näyttäisi siltä että kori loppui siihen. */
.kori-paikka.tyhja {
  min-height: 12px; background: none;
  justify-content: center;
}
.kori-paikka.tyhja::before {
  content: ""; display: block; width: 100%; height: 3px; border-radius: 999px;
  background: rgba(120, 80, 40, 0.14);
}
/* Korin jalka: kuvake, joka kertoo mikä tämä laatikko on. Sama kori kuin eteisen
   hyllynapissa. */
.kori-jalka {
  display: flex; justify-content: center; padding-top: 4px; margin-top: 4px;
  border-top: 1px solid rgba(120, 80, 40, 0.14);
}
.kori-jalka svg { fill: none; stroke: var(--kulta-tumma); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }

@keyframes koriPomppu { from { opacity: 0; transform: scale(0.5) rotate(-8deg); } to { opacity: 1; transform: none; } }

/* Kapea tai matala ruutu: kori kutistuu mutta ei katoa, ja sana pysyy luettavana.
   Kadonnut kori olisi kadonnut palkinto — se on juuri se, mitä lapsi vilkuilee. */
@media (max-width: 560px), (max-height: 520px) {
  .kori { width: 116px; padding: 6px 6px 3px; }
  .kori-paikka { min-height: 36px; gap: 6px; }
  .kori-kuva { width: 30px; height: 30px; }
  .kori-sana { font-size: 16px; }
}

/* Puhelimessa kori ja toimintonappi ovat samalla rivillä ruudun alalaidassa, ja nappi on
   keskellä: 390 px:n ruudulla väliin jäi viisi kuvapistettä ja 375 px:n ruudulla ne
   menivät päällekkäin — kori korin päälle piirtyvän napin alle. Nappi ei siirry, koska
   liikkuva nappi on nappi, jota etsitään; kori kutistuu, ja se kutistuu KUVASTAAN eikä
   sanastaan. Sana on se, joka luettiin, ja se pysyy 16 px:ssä. */
@media (max-width: 480px) {
  .kori { width: 108px; padding: 5px 4px 3px; }
  .kori-paikka { min-height: 32px; gap: 5px; padding: 2px 3px; }
  .kori-kuva { width: 24px; height: 24px; }
}

/* ---------- eteisen korihylly ---------- *
 * Yksi kori pelikertaa kohden, uusin ensin. Nappi on piilossa, kun koreja ei ole
 * yhtään: tyhjä hylly on ainoa ruutu, jota ei kannata avata. */
.korinappi {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 60px; padding: 0 16px;
  border: none; border-radius: 999px;
  background: var(--kortti);
  box-shadow: var(--varjo-m), inset 0 -3px 0 rgba(120, 80, 40, 0.14);
  font-family: "Baloo 2", "Nunito", sans-serif; font-weight: 800; font-size: 18px;
  color: var(--muste);
  cursor: pointer;
}
.korinappi:active { transform: translateY(2px); }
.korinappi svg { display: block; fill: none; stroke: var(--kulta-tumma); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.korimaara { color: var(--muste-hento); font-variant-numeric: tabular-nums; }

.korilista { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 18px; }
/* Korin kansi on sen sisältö pienenä: lapsi tunnistaa oman korinsa siitä, mitä siinä on.
   Päivämäärä on pieni ja aikuiselle — sama sääntö kuin paneelin ikämerkissä. */
.korikortti {
  width: 132px; min-height: 132px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 8px; border: none; border-radius: 22px;
  background: var(--kortti);
  box-shadow: var(--varjo-m);
  cursor: pointer;
}
.korikuvat {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px;
  max-width: 108px;
}
.korikuvat img { width: 32px; height: 32px; display: block; }
.korikuva-tyhja { width: 32px; height: 32px; border-radius: 50%; background: rgba(120, 80, 40, 0.12); }
.koripaiva {
  font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 14px; color: var(--muste-hento);
}

/* Yksi kori auki, ja voittoruudun kori: samat kortit. Kuva ja sen alla sana — tämä on se
   yksi paikka, jossa ne ovat yhdessä, koska sana on jo luettu. */
.sanakortit {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 12px;
  margin: 4px 0 6px;
}
.sanakortti {
  width: 104px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px; border-radius: 18px;
  background: var(--kortti);
  box-shadow: var(--varjo-l);
}
.sanakortti img { width: 72px; height: 72px; display: block; }
.sanakortti-tyhja { width: 72px; height: 72px; border-radius: 50%; background: rgba(120, 80, 40, 0.12); }
.sanakortti-sana {
  font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 20px; color: var(--muste);
}

@media (max-width: 560px) {
  .korinappi span { display: none; }
  .korinappi { padding: 0 14px; }
  .korikortti { width: 108px; min-height: 108px; }
  .korikuvat { max-width: 88px; }
  .sanakortti { width: 88px; }
  .sanakortti img, .sanakortti-tyhja { width: 60px; height: 60px; }
}