/* ===================== 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; }

.yla { width: 100%; display: flex; align-items: center; justify-content: space-between; }

/* 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); }
.tahti.syttyy { animation: tahtiPomppu 520ms cubic-bezier(.2, .9, .3, 1.5); }

.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;
}
.toiminto .toiminto-teksti { min-width: 0; }
.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; }
.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); }
}

/* 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; }
}

/* ---------- zoomipainikkeet ---------- *
 * Yksi pilleri, jossa on kaksi puolikasta, eikä kahta irrallista palloa: kaksi erillistä
 * varjollista nappia nurkassa on kaksi asiaa, ja tämä on yksi asia kahteen suuntaan.
 * 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;
  border-radius: 999px;
  background: var(--kortti);
  box-shadow: var(--varjo-m), inset 0 -3px 0 rgba(120, 80, 40, 0.12);
  overflow: hidden;
  pointer-events: auto;
}
.zoomnappi {
  width: 58px; height: 58px; min-height: 58px; padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  touch-action: none;
  color: var(--muste-hento);
}
/* Ohut väliviiva puolikkaiden välissä: se kertoo että nappeja on kaksi, ilman että
   kumpikaan tarvitsee omaa reunaa. */
.zoomnappi + .zoomnappi { box-shadow: inset 0 1px 0 rgba(120, 80, 40, 0.18); }
.zoomnappi svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.zoomnappi:active { transform: none; background: rgba(120, 80, 40, 0.10); }
.zoomnappi:hover { color: var(--muste); }

/* Matalalla vaakaruudulla napit kutistuvat kuten toimintonappikin. */
@media (max-height: 560px) {
  .zoomnappi { width: 50px; height: 50px; min-height: 50px; }
  .kulkunappi { min-height: 50px; padding: 0 16px; font-size: 17px; }
}

/* ---------- 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 {
  font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 19px;
  color: var(--muste-hento);
  font-variant-numeric: tabular-nums;
}
.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; }
}

/* ---------- 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; }
}