/* ⚠️ APINAVAAKA TUO OMAN TYPOGRAFIANSA (14.10.2026). Kun komponentti asui pizzalove-fi:ssä, fontit tulivat sivuston `tyyli.css`:stä. Pelin puolella sellaista ei ole — `yhteinen.css` ei määrittele yhtäkään sivuston tokenia eikä Poppinsia, ja `peli.css` on korttipelin oma 1 296 rivin tyyli, jota tämä ei voi ladata. 📐 Mitattu: apinavaaka käyttää painoja 600, 700 ja 800, mutta pelin `fontit/`-kansiossa oli vain 400 ja 700. Ilman tätä selain olisi syntetisoinut 600:n ja 800:n — ei virhe jonka huomaa, vaan hieman väärä kirjasinpaino. 600 ja 800 kopioitiin pizzalove-fi:n fonteista. ⚠️ Värit eivät tarvitse mitään: jokaisella sivuston tokenilla on apinavaaassa jo varapolku (`var(--ink,#1A1A1A)` jne.), joten komponentti näyttää oikealta myös ilman `tyyli.css`:ää. Vain `--i`, `--leveys` ja `--pala` ovat ilman varapolkua, ja ne ovat komponentin omia, JS:n asettamia. */ @font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap; src:url('../fontit/poppins-400.woff2') format('woff2')} @font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap; src:url('../fontit/poppins-600.woff2') format('woff2')} @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap; src:url('../fontit/poppins-700.woff2') format('woff2')} @font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap; src:url('../fontit/poppins-800.woff2') format('woff2')} /* Apinavaaka-pikkupeli. Mahtuu yhdelle puhelimen ruudulle (~560 px korkea, 360 px leveä). * Värit tulevat sivuston tyyli.css:n muuttujista, oletukset tässä. */ /* ⚠️ KOMPONENTTI EI SAA NOJATA SIVUSTON GLOBAALEIHIN SÄÄNTÖIHIN (14.10.2026). Nämä kaksi tulivat pizzalove.fi:n `tyyli.css`:stä, ja apinavaaka on nyt myös sivulla joka ei lataa sitä (`pizzaparty/apinavaaka.html`). 📐 Mitattu ero valikon apinassa: pizzalove.fi 52 × 66 px, uusi sivu 76 × 96 px — +46 %, koska `img{max-width:100%}` puuttui. Marko näki sen puhelimesta ennen kuin yksikään tarkistin sanoi mitään: molemmat sivut toimivat, toinen vain näytti rikkinäiseltä. ⚠️ Ja tämä on se vikalaji joka toistuu: komponentti testattiin AINA sivulla joka antoi nämä säännöt, joten riippuvuutta ei näkynyt. */ :where(.av, .av *, .av *::before, .av *::after){box-sizing:border-box} :where(.av img){max-width:100%;height:auto;display:block} /* ⚠️ `:where()` EI OLE TYYLISEIKKA VAAN KORJAUS (15.10.2026). Ensimmäinen versio oli `.av img{...}` (tarkkuus 0,1,1), ja se voitti komponentin omat säännöt — mitä sivuston `img{...}` (0,0,1) ei koskaan tehnyt. 📐 Mitattu: 3D-nopan tahkot katosivat. `noppa3d.js` asettaa leveyden inline-tyylinä (148,8 px), mutta `max-width:100%` lasketaan vanhemmasta `.n3d__kappale{width:0}` — eli nollasta. `.n3d__tahko{max-width:none}` oli olemassa juuri tätä varten, mutta hävisi tarkkuudessa. Laskettu leveys oli **0 px**, eikä mikään kaatunut: noppa vain ei näkynyt. `:where()` antaa tarkkuudeksi 0,0,0, joten jokainen komponentin oma sääntö voittaa — tasan kuten sivustolla, jossa tämä toimi vuosia. */ .av{position:relative;max-width:440px;margin:0 auto;background:var(--surface,#fff);border:1px solid var(--line,#E7DCCA); border-radius:var(--radius,18px);padding:12px 14px 16px;box-shadow:var(--shadow,none); -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-family:Poppins,"Helvetica Neue",Arial,sans-serif} .av button{font:inherit;color:inherit} /* yläpalkki */ .av__ylapalkki{position:relative;z-index:95;display:flex;justify-content:space-between;align-items:center;height:64px;margin-bottom:-58px;pointer-events:none} .av__ylapalkki>*{pointer-events:auto} .av__nopparivi{display:flex;justify-content:center;margin:14px 0 -10px;position:relative;z-index:4} .av__info{position:relative;width:52px;height:52px;border-radius:50%;border:0;padding:0;cursor:pointer;flex:none; background:#F1EBBC;box-shadow:inset 0 0 0 2.5px #fff,0 2px 6px rgba(60,30,0,.25)} /* apina on ympyrää isompi: kasvot keskellä, tukka ja kyynärpää yli reunan */ .av__info img{position:absolute;left:-6px;top:-1px;width:76px;height:auto;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))} .av__info-merkki{position:absolute;right:-2px;bottom:-2px;width:19px;height:19px;border-radius:50%;background:var(--orange, #EE7203); display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;box-shadow:0 0 0 2px #fff} .av__info-merkki i{display:block;width:9px;height:2px;border-radius:1px;background:#1A1A1A} .av__info:active img{transform:scale(.95)} .av__pisteet{position:absolute;left:50%;top:6px;transform:translateX(-50%);display:flex;justify-content:center;gap:6px} .av__ylapalkki .av__boksi{margin-left:auto} .av__pisteet i{width:10px;height:10px;border-radius:50%;background:var(--line,#E7DCCA);transition:background .3s,transform .3s} .av__pisteet i.nyt{background:var(--orange, #EE7203);transform:scale(1.3)} .av__pisteet i.tehty{background:#C2580C} .av__noppa{border:0;background:none;padding:0;cursor:pointer;border-radius:16px} .av__noppa:disabled{cursor:default} /* Heiton ajan noppa on muun paalla ja isona - ks. nostaNoppa (apinavaaka.js). */ .av__nopparivi .av__noppa--iso{ position:relative;z-index:30;transform:scale(2.6); filter:drop-shadow(0 10px 18px rgba(60,30,0,.35)); transition:transform .28s cubic-bezier(.2,1.25,.4,1), filter .28s ease-out} .av__nopparivi .av__noppa{transition:transform .35s ease-out, filter .35s ease-out} .av__d10{display:block;width:80px;height:76px} .av__noppa--odottaa .av__d10{animation:av-kutsu 1.8s ease-in-out infinite} @keyframes av-kutsu{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.12)}90%{transform:scale(.97)}} .av--tonaisu{animation:av-tonaisu .4s ease!important} @keyframes av-tonaisu{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}} /* 3D-noppa (noppa3d.js) */ .n3d{position:relative;perspective:420px} .n3d__kappale{position:absolute;left:50%;top:46%;width:0;height:0;transform-style:preserve-3d} .n3d__tahko{position:absolute;left:0;top:0;transform-origin:0 0;backface-visibility:hidden;-webkit-backface-visibility:hidden;max-width:none} .n3d__varjo{position:absolute;left:50%;bottom:2px;width:46px;height:9px;border-radius:50%; background:radial-gradient(closest-side,rgba(40,20,0,.55),rgba(40,20,0,0));transform:translateX(-50%)} /* näyttämö */ .av__nayttamo{position:relative;width:100%;margin-top:6px;--pala:8px;--leveys:34px} .av__nayttamo>img{position:absolute;height:auto;pointer-events:none;max-width:none} .av__vasen,.av__oikea{transition:transform .5s cubic-bezier(.3,1.5,.5,1)} .av__kieli{transition:transform .6s cubic-bezier(.3,1.9,.5,1)} /* Katse on hitaampi kuin kieli: se on katse eikä nykäisy. */ .av__silmat{transition:transform .38s cubic-bezier(.25,.9,.3,1)} .av__lamppu--paalla,.av__saihkeet{opacity:0;transition:opacity .3s} .av__saihkeet{transform:scale(.6);transition:opacity .3s,transform .5s cubic-bezier(.3,1.8,.5,1)} .av--valo .av__lamppu--paalla{opacity:1} /* Sytytetty lamppu on napautuskohde VAIN kun «Vie»-nappi on olemassa (`av--vie`, ks. apinavaaka.js). Palava lamppu ilman tehtävää oli pelaajalle rikkinäinen nappi. `.av__nayttamo>img` on `pointer-events:none`, joten se avataan tälle yhdelle kuvalle. */ .av--valo.av--vie .av__lamppu--paalla{pointer-events:auto;cursor:pointer} .av--valo .av__saihkeet{opacity:1;transform:scale(1);animation:av-valo 1.6s ease-in-out .5s infinite} @keyframes av-valo{50%{transform:scale(1.06);opacity:.75}} .av__pino{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column-reverse; align-items:center;gap:calc(var(--pala)*.35);transition:left .5s cubic-bezier(.3,1.5,.5,1),top .5s cubic-bezier(.3,1.5,.5,1);z-index:3} .av__pino-osa{display:block;padding:0;border:0;background:none;cursor:pointer;line-height:0} .av__pino-osa--punnus{cursor:default} .av__torni{display:flex;flex-direction:column-reverse;align-items:center;gap:calc(var(--pala)*.18)} .av__torni i{display:block;width:var(--leveys);height:var(--pala);border-radius:calc(var(--pala)*.35); box-shadow:inset 0 calc(var(--pala)*-.22) 0 rgba(0,0,0,.2)} .av__torni i.av__punnus{background:#fff;box-shadow:inset 0 0 0 1px #9C9285,inset 0 calc(var(--pala)*-.22) 0 rgba(0,0,0,.1); font-style:normal;font-size:calc(var(--pala)*.8);line-height:var(--pala);text-align:center;font-weight:700;color:#6E6357} @keyframes av-pudotus{from{transform:translateY(-40%);opacity:0}} .av__uusi .av__torni i{animation:av-punnus .3s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i)*110ms)} @keyframes av-punnus{from{transform:translateY(-300%);opacity:0}} /* ⚠️ PYÖRISTETTY NELIKULMIO, EI PILLERI (Marko 15.10.2026: «Ympyrä on brändin mukainen muoto, mutta sellainen ellipsi tai ns. oikea pilleri ei, vaan silloin aina pyöristetty nelikulmio»). Tämä on aina tekstiä leveämpi kuin korkea (`padding:1px 10px`, `nowrap`), joten 999px teki siitä pillerin — toisin kuin laudan ympyränmuotoiset merkit, jotka ovat neliöitä. */ .av__luku{position:absolute;transform:translate(-50%,0);z-index:4;background:var(--surface,#fff);border-radius:9px; padding:1px 10px;font-weight:800;font-size:clamp(16px,5vw,20px);font-variant-numeric:tabular-nums;white-space:nowrap; box-shadow:0 1px 4px rgba(60,30,0,.25);transition:left .5s cubic-bezier(.3,1.5,.5,1),top .5s cubic-bezier(.3,1.5,.5,1)} .av__juhla{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.3);opacity:0;z-index:6; background:var(--orange, #EE7203);color:#1A1A1A;font-weight:800;font-size:clamp(22px,7vw,30px);padding:8px 18px;border-radius:16px; box-shadow:0 6px 20px rgba(60,30,0,.3);transition:transform .45s cubic-bezier(.3,1.8,.5,1),opacity .2s;pointer-events:none;white-space:nowrap} .av__juhla.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-4deg)} /* viestirivi */ .av__rivi{height:60px;margin:10px 0 14px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:16px;line-height:1.2;padding:0 6px} .av .av__vie{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;font-weight:700;font-size:18px; padding:12px 26px;border-radius:14px;background:var(--orange, #EE7203);color:#fff;box-shadow:0 4px 0 #C2580C,0 8px 18px rgba(244,121,32,.35); animation:av-esiin .35s cubic-bezier(.3,1.6,.5,1),av-kehota 1.6s ease-in-out .6s infinite} .av__vie span{font-size:20px;line-height:1} .av__vie:active{transform:translateY(2px);box-shadow:0 2px 0 #C2580C} .av__vie--varasto{background:var(--deep,#C2580C);color:#fff} @keyframes av-kehota{50%{transform:translateY(3px)}} @keyframes av-esiin{from{transform:scale(.6);opacity:0}} .av__rivi--ok{color:var(--ink,#1A1A1A);font-size:20px} .av__rivi--havikki{color:var(--deep,#C2580C)} /* varasto ja linjasto */ .av__hyllyt{display:grid;gap:10px} /* ⚠️ HYLLYT SAAVAT EROTTUA OMALLA VÄRILLÄÄN (Marko 19.10.2026, * tarkennus: «minusta varasto ja linjasto saa erottua omalla * värikkäällä taustallaan siitä taustakuosista»). Tulkitsin hänen * edellisen viestinsä ensin niin että varaston oma väri on se haitta - * se ei ollut. Haitta oli `.av--koko`n taustanvärinen suorakulmio * NIIDEN ALLA, ks. alempana. */ .av__hylly{position:relative;background:#F1EBBC;border-radius:14px;padding:8px 8px 6px} /* pelilaudan keltainen */ .av__hylly--linjasto{background:#CDE9F0} /* pelilaudan vaaleansininen */ .av--havikki .av__hylly--linjasto{box-shadow:inset 0 0 0 2px var(--orange, #EE7203)} .av__hylly-nimi{position:absolute;left:12px;top:7px;z-index:3;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6B6438;line-height:1.4} .av__hylly--linjasto .av__hylly-nimi{color:#4E6670} .av__hylly-nimi b{color:var(--ink,#1A1A1A);margin-left:3px} .av__paikat{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;align-items:end;--pala:4px} .av__paikka{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:72px} .av__paikka small{font-size:10.5px;font-weight:700;color:var(--soft,#6E6357);line-height:1.2} .av__paikka--tyhja::before{content:"";display:block;width:16px;height:4px;border-radius:3px;border:1px dashed var(--line2,#D6C7AF);margin-bottom:2px} .av__hylly-torni{display:flex;width:100%;justify-content:center;padding:3px 0 2px;border:0;background:none;cursor:pointer;border-radius:8px} .av__hylly-torni:active:not(:disabled){transform:scale(.92)} .av__hylly-torni:disabled{cursor:default} .av__hylly-torni .av__torni i{width:18px} .av__hylly-torni:focus-visible,.av__pino-osa:focus-visible,.av__info:focus-visible,.av__noppa:focus-visible{outline:3px solid var(--orange, #EE7203);outline-offset:2px} /* ohjeikkuna */ .av__ikkuna{position:fixed;inset:0;z-index:100;background:rgba(20,12,4,.45);display:grid;place-items:center;padding:16px} .av__ikkuna[hidden]{display:none} /* Ylapehmuste tekee tilaa Bassolle: han on ylanurkassa ja vinkkikortti alkaa hanen leukansa kohdalta. */ .av__ikkuna-sisus{position:relative;background:var(--ground,#FAF6EE);border-radius:18px;max-width:380px;width:100%;max-height:90vh;overflow:auto; padding:104px 18px 16px;box-shadow:0 12px 40px rgba(0,0,0,.3);font-size:15px;line-height:1.45;-webkit-user-select:text;user-select:text} /* Basso väistää sulkunapin: se on nyt oikeassa yläkulmassa. */ /* ⚠️ BASSO ON VALIKON YLAREUNASSA ISONA, EI KELLUMASSA TEKSTIN SEASSA * (Marko 19.10.2026: «myöskään tuo pieni miettivä apina ei ole hyvä * tuossa. Se pitäisi olla esim. tämän valikon yläreunassa tosi isona, * että se näkyy sieltä takaa»). * 📐 Ennen: `float:right; width:64px` keskella luetteloa, jolloin * ranskalaiset viivat kiersivat sen ja rivit katkesivat eri kohdista. * Nyt se on 150 px ylanurkassa JA VINKKIKORTIN TAKANA (z-index 0 vs 1), * eli siita nakyy se osa joka jaa kortin ulkopuolelle - juuri * «nakyy sielta takaa». * ⚠️ Ei negatiivista `top`ia: `.av__ikkuna-sisus` on `overflow:auto`, * joten laatikon ulkopuolelle tyonnetty osa leikkautuisi pois. */ .av__ikkuna-basso{position:absolute;top:0;left:50%;transform:translateX(-50%); width:164px;float:none;margin:0;z-index:0;pointer-events:none;display:block; filter:drop-shadow(0 3px 5px rgba(60,30,0,.2))} /* ⚠️ `[hidden]` ON KIRJOITETTAVA NÄKYVIIN: `:where(.av img){display:block}` on tekijän sääntö ja voittaa selaimen oman `[hidden]{display:none}`:n. */ .av__ikkuna-basso[hidden]{display:none} .av__ikkuna h2{margin:0 0 8px;font-size:21px} .av__ikkuna ol{padding-left:20px;margin:0 0 10px} .av__ikkuna li{margin:3px 0} .av__ikkuna p{margin:0 0 8px} .av__tavat{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0 0 10px;clear:both} .av__tavat dt{width:24px;height:24px;border-radius:50%;background:var(--orange, #EE7203);color:#1A1A1A;font-weight:800;text-align:center;line-height:24px;font-size:13px} .av__tavat dd{margin:0;align-self:center} /* ⚠️ SULKUNAPPI ON PYÖRISTETTY NELIKULMIO, EI YMPYRÄ (Marko 15.10.2026: «Täysin pyöreä pillerin pääty ei ole brändin mukainen vaan se on aina pyöristetty nelikulmio»). Muoto ja mitat tulevat `yhteinen.css`:n `.as-kulma`-säännöstä — sama nappi kuin korttipelin asetuksissa. Tässä on vain sijainti. */ .av__sulje{position:absolute;right:12px;top:12px;z-index:2} /* VALIKON TASOT: päätaso (rivit) ja alavalikot. Yksi kysymys kerrallaan, kuten korttipelin asetuksissa. */ .av__taso{display:flex;flex-direction:column;gap:8px;margin-top:4px} /* Sama kaksikerroksisuus kuin korttipelin valikossa: kuosi arkin taustalla (`valikko-laatikko`) ja rivit valkoisella kortilla sen päällä. */ .av__taso--paa{gap:0;background:var(--surface,#fff);border-radius:14px; padding:0 14px;box-shadow:0 1px 3px rgba(60,34,12,.10)} .av__taso--paa .as-rivi:last-child{border-bottom:0} .av__taso[hidden]{display:none} .av__taso .valikko-nappi{margin-top:4px} /* ⚠️ VANHA 42 px:N YLAMARGINAALI POISTETTU. Se oli siella koska alavalikossa otsikko ja vinkit ovat piilossa ja ensimmainen nappi nousi sulkunapin alle (mitattu paallekkaisyys 18 px). Nyt laatikolla on 92 px ylapehmuste Bassoa varten, joten sama marginaali painaisi alavalikon 134 px alas. */ .av__paavalikko{width:100%;margin-top:12px} .av--ei-liiketta *{transition:none!important;animation:none!important} /* ---- Nälkäiset apinat ---- */ .av__boksi{display:none} .av--apinat .av__boksi{display:flex;align-items:center;gap:8px} /* ⚠️ BOKSI ON OIKEA PIZZALAATIKKO. Mitat on luettu kuvasta (760 x 760, * keskipiste keskella, kastikerenkaan ulkosade 258 px = 34 %), ja pala on * tasan kymmenesosa ympyrasta (karki 35,9 astetta). Siksi palat ladotaan * 36 asteen valein ilman rakoa. * Pala asetetaan KARKI KESKIPISTEESSA: korkeus 34 % laatikosta, leveys * sama osuus kortin omasta suhteesta (353/546), ja kiertokeskio on palan * alareunan keskella eli tasan laatikon keskipisteessa. */ /* ⚠️ NIMI ON .av__palajuhla EIKA .av__juhla, JA SE ON MITATTU VIRHE. * Valitsin `.av__juhla` oli jo olemassa (ylempana): se on «PIZZAA!» * -huudon tyyli, `position:absolute … transform:translate(-50%,-50%) * scale(.3); opacity:0`. Sama valitsin kahdesti samalla tarkkuudella * tarkoittaa etta uudempi saanto voittaa VAIN ne ominaisuudet jotka se * itse asettaa - vanhan `transform` ja `opacity` jaivat voimaan, ja * peite oli 307 x 230 px ruudun ulkopuolella nakymattomana. Mikaan ei * kaatunut eika konsoliin tullut mitaan; vika nakyi vain mittaamalla * (peite 307 x 230 kun ruutu on 1024 x 768). Juuri tama ansa on * CLAUDE.md:ssa. */ /* ⚠️ `.av__palajuhla` POISTETTU 19.10.2026: ansaittu pala ei enaa ole oma * keskikuvansa vaan se SAMA `.av__boksi-pala` joka jaa boksiin (ks. * `juhliPala`). Saannot jaivat kayttamattomiksi, ja kayttamaton tyyli on * sellainen jota seuraava lukija luulee voimassa olevaksi. Yllaoleva * varoitus nimitormayksesta jaa: se on yha voimassa `.av__juhla`sta. */ /* --- boksi isona keskelle (Marko 19.10.2026) --- * «Tämä voisi tulla myös aivan keskelle ruutua ja isona, jolloin pelaaja * voisi käydä katsomassa oman tilanteensa.» * ⚠️ Puuttuvat palat ovat boksin ULKOPUOLELLA eivätkä harmaina lohkoina * sen sisällä: ulkopuolella ne ovat yhä paloja joita voi saada, sisällä * ne näyttäisivät siltä kuin pizza olisi jo kasassa mutta vajaa. */ .av__boksinaky{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:3vmin;padding:4vmin;cursor:pointer; background:rgba(26,20,12,.62);animation:av-boksinaky .25s ease-out both} @keyframes av-boksinaky{from{background:rgba(26,20,12,0)}} /* ⚠️ VALITSIN ON KAKSIOSAINEN (0,2,0) EIKA `.av__boksi--iso` (0,1,0), * ja se on mitattu virhe: `.av__boksi{display:none}` ja * `.av--apinat .av__boksi{display:flex}` ovat ylempana, ja iso nakyma * ripustetaan bodyyn eli `.av--apinat`in ULKOPUOLELLE. Yhden luokan * saanto havisi `display:none`lle ja laatikko oli 0 x 0 px - nakyma * aukesi, mutta siina ei ollut mitaan. Samalla tarkkuudella voittaja * ratkeaisi jarjestyksesta; tarkkuus kestaa siirtamisen. */ .av__boksinaky .av__boksi--iso{display:block;position:relative; width:min(74vmin, 420px);height:min(74vmin, 420px);flex:0 0 auto; animation:av-boksinaky-sisaan .34s cubic-bezier(.2,1.3,.4,1) both} @keyframes av-boksinaky-sisaan{from{transform:scale(.4);opacity:0}} /* Puuttuvat rivissa boksin alla: tunnistettavia mutta selvasti «ei vielä». */ .av__boksinaky-puuttuu{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4vmin; max-width:min(86vmin, 520px);animation:av-boksinaky-sisaan .34s cubic-bezier(.2,1.3,.4,1) .1s both} /* ⚠️ ISOT JA SELVASTI NAKYVAT (Marko 19.10.2026: «Nuo boksin ulkopuoliset * palat saisi olla isompina ja enemman nakyvissa. Kylla sen ymmartaa, etta * osa on boksin ulkopuolella ja osa sisapuolella.»). Sijainti kertoo jo * eron, joten himmennysta ei tarvita sen kertomiseen - se vain teki * tavoitteesta vaikealukuisen. 📐 11vmin oli 375 px:n ruudulla 41 px; * 17vmin on 64 px ja numero on luettava. */ .av__boksinaky-puuttuu img{display:block;height:17vmin;max-height:108px;width:auto; opacity:.9;filter:grayscale(.15) drop-shadow(0 2px 5px rgba(0,0,0,.45))} /* SYDANPIZZAN LISAPALA SAMASSA RUUDUSSA (Marko 20.10.2026: «siina samassa * ruudussa pelaaja valitsee yhden lisapalan, joka myos menee boksiin»). * Rivi on sama `.av__boksinaky-puuttuu` kuin tavoitteessa - sama koko ja * sama asettelu, eika toista mitoitusta. * ⚠️ VALITTAVAT OVAT TAYDESSA VARISSA: ne eivat ole «ei viela» vaan juuri se * mita ollaan valitsemassa. Siksi valitsin on KAKSIOSAINEN (0,2,1) eika * `.av__boksinaky-valinta img` (0,1,1): jalkimmainen olisi samantarkkuuksinen * kuin `.av__boksinaky-puuttuu img`, ja voittaja ratkeaisi jarjestyksesta. */ .av__boksinaky-valinta{display:flex;flex-direction:column;align-items:center;gap:1.8vmin; animation:av-boksinaky-sisaan .3s cubic-bezier(.2,1.3,.4,1) both} .av__boksinaky-valinta p{margin:0;color:#fff;font-weight:800;text-align:center; font-size:clamp(16px, 3.4vmin, 24px);text-shadow:0 2px 8px rgba(0,0,0,.55)} .av__boksinaky-valinta button{border:0;background:none;padding:0;margin:0;cursor:pointer; border-radius:8px;transition:transform .15s} .av__boksinaky-valinta button:active{transform:scale(.93)} .av__boksinaky-valinta button:focus-visible{outline:3px solid #fff;outline-offset:3px} .av__boksinaky-valinta .av__boksinaky-puuttuu img{opacity:1;filter:drop-shadow(0 3px 7px rgba(0,0,0,.5))} .av__boksi{position:relative;width:68px;height:68px;flex:0 0 auto; filter:drop-shadow(0 2px 3px rgba(60,30,0,.2))} .av__boksi-pohja{position:absolute;inset:0;width:100%;height:100%;display:block} .av__boksi-pala{position:absolute;left:50%;bottom:50%; height:34%;width:calc(34% * 353 / 546); margin-left:calc(-17% * 353 / 546); transform-origin:50% 100%;display:block} .av__boksi-pala.uusi{animation:av-pala .6s cubic-bezier(.3,1.8,.5,1)} /* ⚠️ KIERTO ON TOISTETTAVA AVAINRUUDUISSA. `transform` on yksi * ominaisuus: animaatio korvaa rivityylin kierron kokonaan sen ajaksi, * joten ilman `rotate(var(--kulma))`a pala hyppaisi nollakulmaan ja * palaisi vasta lopussa. Kulma tulee rivityylista samalla kertaa. */ @keyframes av-pala{ from{transform:rotate(var(--kulma,0deg)) scale(.2);opacity:0} to{transform:rotate(var(--kulma,0deg)) scale(1);opacity:1} }} .av__boksi b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums} .av__kortit{display:none} /* ⚠️ LINJASTOLLA EI OLE KORTTIPOHJAA (Marko 19.10.2026: «Miksi linjaston * pizzoilla on nuo neliotaustat? Nehan on pelissa kortteja, joten se on * varmaan se syy neliotaustoille, mutta eiko ne voisi olla pelkastaan * noita pyoreita pizzoja, jolloin ne voisi olla myos isompia.») * Syy oli tasan se minka han arvasi - kortti oli kortti. Linjastolla ne * ovat kuitenkin pizzoja uunia odottamassa, eika pahvi kerro mitaan. * 📐 LEVEYS ON MITATTU, EI ARVATTU: 375 px:n ruudulla korttirivi alkaa * x=28 ja uuni alkaa x=297, eli tilaa on 269 px. 4 x 60 + 3 x 6 = 258, eli uuniin jaa 11 px. */ .av--apinat .av__kortit{display:grid;grid-template-columns:repeat(4,60px);justify-content:start;gap:6px;margin:0 0 -8px 6px;position:relative;z-index:2} /* Pyorea hohto pyorealle pizzalle: nelionmuotoinen varjo nakyi kortin reunoina vaikka pahvi on poissa. */ .av--apinat .av__kortti{width:60px;height:60px;border-radius:50%;background:none;box-shadow:none} .av--apinat .av__kortti .av__kortti-pizza{width:60px;height:60px} /* Sydan pyorean reunalle: nelion nurkassa (-5px) se leijui irti pizzasta. Ympyran 45 asteen piste on noin 0,293 x sade sisaan reunoista. */ .av--apinat .av__kortti .av__sydan{right:1px;bottom:1px} .av__kortti{position:relative;width:58px;height:58px;border-radius:10px;border:0;padding:0;cursor:pointer; background:var(--warm,#FFF3E9);box-shadow:inset 0 0 0 1.5px var(--line2,#D6C7AF),0 2px 4px rgba(60,30,0,.12); display:grid;place-items:center;transition:transform .2s} .av__kortti-pizza{width:48px;height:48px;border-radius:50%;background:#E9B95A;box-shadow:inset 0 0 0 4px #D49A3C;display:grid;place-items:center} /* ⚠️ OIKEA PAINETTU PIZZAKORTTI YHDEN TAYTTEEN PIZZASSA (Marko 19.10.2026). * Naytetaan vain pizza, ei koko korttia: kortti on pystysuora (439 x 620) ja * paikka on pyorea 48 px. * 📐 Rajaus on MITATTU kuvan pikseleista eika arvattu (pizza-15.webp, * punaiset ja keltaiset pikselit): pizzan keskipiste on (220, 309) eli * (50,1 %, 49,8 %) kuvasta, ja halkaisija 264 px - valkean reunuksen kanssa * noin 280 px. Kun kuvan leveys on 157 % paikasta, pizza on tasan paikan * levyinen: 439 / 280 = 1,568. * Taustavari jaa alle, joten kuvan lapinakyva reuna ei nayta reialta. */ .av__kortti-pizza--oikea{ background-repeat:no-repeat;background-position:50.1% 49.8%;background-size:157% auto; box-shadow:inset 0 0 0 2px rgba(255,255,255,.9), 0 1px 3px rgba(60,30,0,.25)} .av__kortti-pizza i{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)} /* Sama syy: kaksinumeroisena (10) tämä on 24 × 18 px eli pilleri. */ .av__kortti b{position:absolute;right:4px;bottom:2px;font-size:14px;font-weight:800;background:#fff;border-radius:6px;padding:0 5px;line-height:18px;box-shadow:0 1px 2px rgba(0,0,0,.2)} .av__kortti--ok{box-shadow:0 0 0 0 transparent,0 6px 16px rgba(244,121,32,.55);animation:av-kortti 1s ease-in-out infinite} @keyframes av-kortti{50%{transform:translateY(-4px) scale(1.05)}} /* 🔵 HIMMENNYS KORTIN TAAKSE (Marko 15.10.2026: «tuo palkintoviesti ei oikein erotu taustastaan, koska kaikki on yhtä kirkkaita»). Opasruudulla (`.av__opasruutu`) himmennys on ollut alusta asti; loppukortilta se puuttui, ja valkoinen kortti kellui kirkkaan laudan päällä. ⚠️ PEITE ON `box-shadow`, EI OMA ELEMENTTI — JA SE ON MITATTU VALINTA. Kokeilin ensin `::before`-peitettä `z-index:-1`:llä, ja se maalautui kortin PÄÄLLE: pinoamiskontekstissa elementin oma tausta maalataan ensin ja negatiivisen z-indexin lapset vasta sen jälkeen, joten kortti itse harmaantui. `position:fixed` ei myöskään käy, koska `.av__loppu` on muunnettu (`translate… scale()`) ja muunnettu esi-isä sitoo jälkeläisen `fixed`- asemoinnin itseensä. Valtava varjon levitys maalautuu elementin ULKOPUOLELLE, joten kumpikaan ansa ei koske sitä. Sama väri kuin opasruudulla. */ .av__loppu{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none;z-index:7; width:min(86%,320px);background:var(--surface,#fff);border-radius:18px;padding:16px 16px 18px;text-align:center; box-shadow:0 10px 30px rgba(60,30,0,.3), 0 0 0 100vmax rgba(20,12,4,.38); transition:transform .45s cubic-bezier(.3,1.7,.5,1),opacity .2s} .av__loppu.on{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto} .av__loppu b{display:block;font-size:30px;font-weight:800} .av__loppu span{display:block;font-size:17px;font-weight:600;margin:4px 0 14px} /* Voittokortti: keltainen kehys, mutta himmennys on sama. */ .av__loppu.voitto{background:#FFF6D6;box-shadow:0 0 0 4px #FFDF00,0 10px 30px rgba(60,30,0,.3), 0 0 0 100vmax rgba(20,12,4,.38)} /* apinat-tilassa tiiviimpi, jotta korttirivi mahtuu samalle ruudulle */ .av--apinat .av__rivi{height:46px;margin:6px 0 8px} /* täytteen tarra tornin päällä */ .av__tarra{display:block;width:calc(var(--leveys)*.8);height:calc(var(--leveys)*.8);border-radius:50%; box-shadow:0 0 0 2px #fff,0 1px 3px rgba(0,0,0,.35);margin-bottom:calc(var(--pala)*-.4);position:relative;z-index:1;display:grid;place-items:center;order:99} .av__tarra img{width:66%;height:66%;object-fit:contain} /* 66 %: koko kuva mahtuu ympyrän sisään */ .av__hylly-torni .av__tarra{width:20px;height:20px;margin-bottom:-3px;box-shadow:0 0 0 1.5px #fff,0 1px 2px rgba(0,0,0,.3)} .av__kortti-pizza i{display:grid;place-items:center;width:34px;height:34px} .av__kortti-pizza i img{width:66%;height:66%;object-fit:contain} .av .av__vie--toinen{background:var(--surface,#fff);color:var(--ink,#1A1A1A);box-shadow:inset 0 0 0 2px var(--orange, #EE7203),0 3px 0 rgba(0,0,0,.12);animation:av-esiin .35s cubic-bezier(.3,1.6,.5,1)} /* ⚠️ VALINTARUUDUKKO ON PALAN LEVYINEN, EI YMPYRAN. Pala on 353 x 546 * eli kapeampi kuin korkea; 44 px leveana se on 68 px korkea ja kymmenen * mahtuu yha samalle riville 375 px:n puhelimessa (10 x 44 + 9 x 6 = 494 * > 375, joten auto-fit rivittaa ne kahdelle rivialle - se on kunnossa, * koska valinta on oma hetkensa eika pelialuetta). */ .av--apinat .av__kortit--valinta{grid-template-columns:repeat(auto-fit,44px);gap:6px;min-height:72px;align-content:center} .av__valinta{border:0;background:none;padding:0;cursor:pointer;--leveys:40px;--pala:8px;animation:av-esiin .35s cubic-bezier(.3,1.6,.5,1)} .av__valinta .av__tarra{width:38px;height:38px;margin:0;animation:av-kortti 1.2s ease-in-out infinite} .av__valinta--pala img{display:block;width:44px;height:auto; filter:drop-shadow(0 2px 4px rgba(60,30,0,.28)); animation:av-kortti 1.2s ease-in-out infinite} /* siirtymäanimaation aikana torni piirretään muiden päälle */ .av__lentaa{position:relative;z-index:20} /* linjasto: täytekulhot – takaosa, torni ja etuosa päällekkäin, jolloin torni on kulhon sisällä */ .av__hylly--linjasto .av__paikka{min-height:0;justify-content:flex-end} .av__kulho{position:relative;width:100%;max-width:38px;aspect-ratio:200/169;margin-top:56px} /* tilaa kymmenen tornille */ .av__kulho img{position:absolute;left:0;top:0;width:100%;height:auto;pointer-events:none} .av__kulho-takana{z-index:0}.av__kulho-edessa{z-index:2} /* keskitys ilman transformia: siirtoanimaatio käyttää transformia, ja translateX(-50%) siirsi tornia ohi kupista */ .av__kulho .av__hylly-torni{position:absolute;left:0;right:0;margin:0 auto;bottom:80%;z-index:1;width:max-content;padding:0} .av__hylly--linjasto .av__paikka--tyhja::before{display:none} /* Nälkäiset apinat: liukuhihna kulkee uunin läpi, molemmat linjaston taustalla */ .av__tuotanto{display:none} .av--apinat .av__tuotanto{display:block;position:relative;margin:6px -2px 0} .av__hihna{display:block;width:100%;height:auto;position:relative;z-index:1} .av__hihnarivi{position:relative} .av__uuni{position:absolute;right:2px;bottom:20%;width:54px;z-index:3;transform-origin:50% 100%} .av__uuni--paistaa{animation:av-uuni .5s ease-in-out 2} @keyframes av-uuni{50%{transform:scale(1.08);filter:brightness(1.15) saturate(1.3)}} .av__kortti--paistuu{pointer-events:none;z-index:4} .av__kortti--uusi{animation:av-uusikortti .5s cubic-bezier(.3,1.4,.5,1)} @keyframes av-uusikortti{from{transform:translateX(-90px);opacity:0}} .av--apinat .av__kortit--valinta{margin-bottom:0} /* isompi kosketusalue: koko sarake */ .av__paikka--torni{cursor:pointer;border-radius:10px;transition:background .15s} .av__paikka--torni:active{background:rgba(255,255,255,.55)} .av__paikat{gap:1px} .av__hylly{padding-left:4px;padding-right:4px} /* ---- Vaakanäyttö (puhelin poikittain): apina vasemmalla, linjasto ja varasto oikealla ---- */ @media (orientation:landscape) and (max-height:520px){ .av{max-width:none;display:grid;grid-template-columns:150px 170px minmax(0,1fr); grid-template-areas:"yla yla hyllyt" "apina apina hyllyt" "noppa rivi hyllyt"; grid-template-rows:auto auto 1fr;column-gap:14px;align-items:start;padding:8px 12px 10px} .av__ylapalkki{grid-area:yla} .av__nayttamo{grid-area:apina;margin-top:0} .av__nopparivi{grid-area:noppa;margin:0;align-self:center} .av__rivi{grid-area:rivi;margin:0;height:auto;min-height:60px;align-self:center;font-size:15px} .av .av__vie{font-size:15px;padding:10px 16px} .av__hyllyt{grid-area:hyllyt;align-self:stretch;display:flex;flex-direction:column;gap:8px} .av__hylly--linjasto{flex:none} .av:not(.av--apinat) .av__hyllyt{justify-content:center} /* isommat tornit ja kulhot, kun tilaa on leveyssuunnassa */ .av__paikat{--pala:5px} .av__hylly-torni .av__torni i{width:24px} .av__hylly-torni .av__tarra{width:26px;height:26px} .av__paikka{min-height:86px} .av__kulho{max-width:48px;margin-top:74px} .av--apinat .av__kortit{grid-template-columns:repeat(4,68px)} .av--apinat .av__kortti, .av--apinat .av__kortti .av__kortti-pizza{width:68px;height:68px} .av__uuni{width:60px} } /* oma sivu: peli käyttää koko ruudun, ei korttikehystä */ .av--koko{border:0;border-radius:0;box-shadow:none;background:transparent;max-width:520px;margin-left:auto;margin-right:auto} @media (orientation:landscape) and (max-height:520px){.av--koko{max-width:940px}} /* valikko */ /* ⚠️ VINKIT OMALLE VALKOISELLE PINNALLE, KUTEN RIVIT (Marko 19.10.2026: * «tämä valikko on epäselvä ja huonosti luettava»). * 📐 Mitattu syy: paneelissa oli KAKSI ERI SAANTOA. `.av__taso--paa` * (Pelimuodot / Kieli) on valkoisella kortilla - kuten valikon oma * kommentti sanoo, «kuosi arkin taustalla ja rivit valkoisella kortilla * sen päällä» - mutta otsikko ja ranskalaiset viivat olivat suoraan * kuosin paalla, joka on opacity .35. Musta teksti .35-kuosin paalla on * se mita Marko luki huonosti. Nyt koko paneeli noudattaa sita saantoa * joka siina jo oli. */ .av__vinkit{position:relative;z-index:1;background:var(--surface,#fff); border-radius:14px;padding:12px 14px 10px;margin:0 0 8px; box-shadow:0 1px 3px rgba(60,34,12,.10)} .av__vinkit h2{margin:0 0 8px;font-size:19px;padding-right:46px} .av__vinkit ul{margin:0;padding-left:18px} .av__vinkit li{margin:5px 0} /* Rivit ja alavalikot apinan paalle. */ .av__taso{position:relative;z-index:1} .av__vinkit h2{padding-right:58px} .av__vinkit[hidden]{display:none} .av__vinkit li{font-size:16px} .av__sydan{position:absolute;right:-5px;bottom:-5px;width:24px;height:24px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.3)} .av__sydan img{width:68%;height:auto} .av__laatikko{display:block;width:110px;margin:-46px auto 2px} .av__loppu{padding-top:10px;margin-top:24px} /* ---- opastettu harjoitus ---- */ .av__paikka--himmea{opacity:.28;filter:grayscale(.6);pointer-events:none} .av__paikka--vihje{position:relative;animation:av-vihje 1.1s ease-in-out infinite} .av--opas .av__rivi{height:118px;min-height:118px;flex-direction:column;justify-content:center;gap:6px;overflow:hidden} .av__lause{display:block} .av__rivi-teksti{display:block;font-size:15px} .av__opasruutu{position:fixed;inset:0;z-index:90;background:rgba(20,12,4,.38);display:grid;place-items:center;padding:16px;animation:av-esiin .3s ease} .av__opasruutu[hidden]{display:none} .av__opaskortti{background:var(--surface,#fff);border-radius:22px;max-width:340px;width:100%;padding:22px 22px 18px;text-align:center; box-shadow:0 14px 40px rgba(0,0,0,.3);animation:av-esiin .4s cubic-bezier(.3,1.6,.5,1)} .av__opaskortti small{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--deep,#C2580C)} .av__opaskortti h2{font-size:28px;margin:4px 0 2px} .av__opaskortti .av__lainaus{font-size:18px;font-weight:700;color:var(--soft,#6E6357);margin:0 0 10px} .av__opaskortti p{font-size:17px;margin:0 0 6px} .av__opaskortti .av__laatikko{margin:-60px auto 4px} .av__opasnapit{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:14px} .av__opasnapit .nappi--toinen{border:0;cursor:pointer;font-weight:700} /* noppa piiloon, kun sitä ei enää tarvita (tornit vaa'alla tai pizzavaihe) */ .av--noppapois .av__noppa{visibility:hidden;pointer-events:none} .av__rivi-alku{display:block;font-size:14px;font-weight:600;color:var(--soft,#6E6357);margin-bottom:2px} .av__kortti--katso{animation:av-kortti .8s ease-in-out infinite} /* napit: pyöristetty suorakaide kuten muualla sivustolla, ei pillereitä */ .av .nappi,.av .av__vie,.av__opasnapit .nappi{border-radius:14px} .av__opasnapit .av__vie{min-width:220px;justify-content:center} .av__pisteet i{flex:none} .av__paikka--hamara{opacity:.35;filter:grayscale(.5)} .av__paikka--kulho{cursor:pointer} @keyframes av-vihje{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.12);filter:brightness(1.18) drop-shadow(0 0 8px rgba(255,255,255,.95))}} @media (prefers-reduced-motion:reduce){.av__paikka--vihje{animation-duration:2.2s}} .av--apinat .av__kortit{min-height:60px} /* uuni pysyy hihnalla, vaikka kortit loppuvat */ /* Auta Bassoa: pulmat */ .av--pulmat .av__rivi{height:118px;min-height:118px;flex-direction:column;justify-content:center;gap:6px;overflow:hidden} .av__kortti-pizza.av__kortti-pizza--monta{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:1px;padding:4px;box-sizing:border-box} .av__kortti-pizza.av__kortti-pizza--monta i{width:19px;height:19px;box-shadow:0 0 0 1.5px #fff} .av__tasot-otsikko{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--soft,#6E6357);margin:14px 0 6px} .av__tasot{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 4px} .av__tasot button{width:38px;height:38px;border-radius:10px;border:0;background:#F1EBBC;font:inherit;font-weight:800;font-size:16px;cursor:pointer} .av__tasot button.nyt{background:var(--orange, #EE7203);color:#fff} /* nopeat napautukset eivät zoomaa ruutua (tuplanapautuszoomaus pois), nipistyszoomaus säilyy */ .av,.av *{touch-action:manipulation} /* ---- Pystynäyttö: apina seisoo linjaston takana, viesti ja päätoiminto (noppa / Vie) alhaalla peukalon alla ---- */ .av__nopparivi{position:relative} .av__vie-paikka{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none} .av__vie-paikka>*{pointer-events:auto} @media not all and (orientation:landscape) and (max-height:520px){ .av__nopparivi{margin:2px 0 0;min-height:84px;align-items:center} .av__hyllyt{margin-top:-6px;position:relative;z-index:2} /* apinan rajattu alareuna linjaston yläreunaan */ .av__rivi{margin:8px 0 0;height:46px;font-size:16px} .av--opas .av__rivi,.av--pulmat .av__rivi{height:76px;min-height:76px;gap:4px} .av--apinat:not(.av--opas):not(.av--pulmat) .av__rivi{height:46px;margin:8px 0 0} } /* pulmapelin lamppu-vihjenappi oikeassa yläkulmassa (boksin paikalla) */ .av__vihjenappi{display:none} .av--pulmat .av__vihjenappi{display:grid;place-items:center;margin-left:auto;width:52px;height:52px;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)} .av__vihjenappi img{width:30px;height:auto;pointer-events:none} .av__vihjenappi:active img{transform:scale(.92)} @media not all and (orientation:landscape) and (max-height:520px){ .av__nayttamo{margin-top:26px} /* tilaa korkeille torneille yläpalkin alla */ .av--pulmat .av__rivi{height:50px;min-height:50px} } .av__tasonro{font-size:13px;font-weight:800;letter-spacing:.03em;color:var(--soft,#6E6357);margin-right:4px;white-space:nowrap;align-self:center;line-height:1} .av__pisteet{align-items:center} .av--pulmat .av__ylapalkki .av__boksi{margin-left:10px} .av__tasot button:disabled{opacity:.35;cursor:default} /* lamppu nopan vasemmalla puolella, boksi yksin oikeassa yläkulmassa; noppa isompana */ .av--pulmat .av__ylapalkki .av__boksi{margin-left:auto} .av--pulmat .av__vihjenappi{position:absolute;left:6px;top:50%;transform:translateY(-50%);margin:0;z-index:2} .av__noppa{transform:scale(1.35);transform-origin:50% 50%} @media not all and (orientation:landscape) and (max-height:520px){ .av__nopparivi{min-height:112px} } @media (orientation:landscape) and (max-height:520px){ .av__noppa{transform:scale(1.15)} .av--pulmat .av__vihjenappi{left:auto;right:-58px;top:auto;bottom:0;transform:none;width:44px;height:44px} .av--pulmat .av__vihjenappi img{width:26px} } /* Kiinteät värit: selaimen tumma tai vaalea teema ei vaikuta peliin (sivuston tyyli.css vaihtaa muuttujat tummassa teemassa, joten peli määrittää omansa). */ .av{color-scheme:light;color:#1A1A1A;--ground:#FAF6EE;--surface:#FFFFFF;--warm:#FFF3E9;--ink:#1A1A1A;--soft:#6E6357; --line:#E7DCCA;--line2:#D6C7AF;--orange:#EE7203;--deep:#C2580C;--radius:18px; --shadow:0 1px 2px rgba(60,34,12,.06),0 8px 24px rgba(60,34,12,.08)} /* ⚠️ PELIN OMA POHJA KANTAA TÄYTEKUOSIN (Marko 19.10.2026: «kun siinä * taustakuosin ja mm. varaston välissä on vielä sellainen taustan * värinen suorakulmio, niin sitä mietin, että saako sen pois»). * 📐 Mitattu: `.av--koko` on 832 x 374 px umpinainen #FAF6EE -laatta, * joka peitti body-tason kuosin kaikkialta paitsi ohuelta reunalta - * juuri se suorakulmio jonka Marko näki. * ⚠️ SE EI OLE TURHA, joten sitä ei voi vain poistaa: `.av--koko` on * rivillä 358 `background:transparent`, ja tämä myöhempi sääntö on * siellä siksi että sivuston TUMMA teema vaihtaa `--ground`in tummaksi * eikä peli saa muuttua tumman päällä. (Sama valitsin kahdesti eri * sisällöllä on itsessään se järjestysansa josta CLAUDE.md varoittaa - * nyt se on edes kommentoitu.) * Ratkaisu: kuosi JA vaalea pohja samassa taustassa, ja päällimmäisenä * läpikuultava pesu joka vastaa body-tason opacity .14:ää. Näin peli on * vaalea myös tummassa teemassa eikä kuosi katoa. * ⚠️ `url()` ratkeaa TÄHÄN tyylitiedostoon nähden (apinavaaka/), siksi * `../kuvat/` - sama ansa on kirjattu norsu-siten CLAUDE.md:hen. */ .av--koko{ background: linear-gradient(rgba(250,246,238,.86), rgba(250,246,238,.86)), url('../kuvat/kuosi.svg?v=20261006a') repeat; background-size:auto, 286px 285px; /* ⚠️ KUOSI KIINNI RUUTUUN, EI LAATIKKOON. `.av--koko` on leveällä * näytöllä kapeampi kuin ruutu (mitattu 1024 px: 443 px keskitettynä), * jolloin sen oma kuosi alkaisi laatikon reunasta ja body-tason kuosi * ruudun reunasta - sauma. Mitattu siirtymä oli 5 px x ja 6 px y eli * sattumalta lähes kohdallaan; `fixed` tekee siitä säännön. */ background-attachment:scroll, fixed; background-color:#FAF6EE; } /* opas: tekstin vaihtuessa pieni välähdys, jotta muutos huomataan */ @keyframes av-valahdys{0%{opacity:.2;transform:scale(.96)}60%{opacity:1;transform:scale(1.03)}100%{transform:none}} .av__rivi--uusi{animation:av-valahdys .42s ease-out} @media (prefers-reduced-motion:reduce){.av__rivi--uusi{animation:none}} /* ---- esittely: pelin osat (Apinavaaka tutuksi, 20.10.2026) ---- Marko: «otat siihen ruudulle keskelle isona sen jonkin asian ja selitetään se selkeästi.» Iso kuva menee SAMALLE opasruudulle (`.av__opaskortti`) jolla siirtotavat jo esitellään — ei omaa peitettä, ei omaa korttia. ⚠️ KORTTI SAA VIERITTYÄ. Vuoron kulku -kortilla on kuva, otsikko, kolme numeroitua askelta ja huomautus, ja matalin mitattu tila (1024 x 768 vaakaan) jättää kortille 768 px. Ilman `max-height`ia nappi jäisi ruudun alapuolelle — ja nappi on se jolla eteenpäin pääsee. */ .av__opaskortti{max-height:calc(100vh - 32px);overflow:auto;overscroll-behavior:contain;padding-bottom:0} /* ⚠️ NAPPI PYSYY NÄKYVISSÄ VAIKKA KORTTI VIERISI. Mitattu 812 x 375:ssä (puhelin poikittain): «Vuoron kulku» on 625 px korkea, kortille jää 343 px, ja «Selvä» oli y = 525 eli ruudun alapuolella. Kortti kyllä vieri, mutta nappi on se jolla eteenpäin pääsee — sitä ei saa joutua etsimään. `sticky` tarttuu vierityslaatikon alareunaan; lyhyillä korteilla se ei tee mitään, joten siirtotapojen kortit eivät muutu. */ .av__opaskortti .av__opasnapit{position:sticky;bottom:0;background:var(--surface,#fff);padding:6px 0 18px;margin-top:10px} /* ⚠️ ETULIITE `.av__opaskortti` ON TARKKUUTTA VARTEN EIKÄ KOSMETIIKKAA. `.av--apinat .av__kortti` (0,2,0) tekee kortista 60 px:n ympyrän ilman taustaa, ja se on päällä myös opastuksessa (`tuot`-haara). Pelkkä `.av__esittelykortti` (0,1,0) hävisi sille — mitattu: kortti piirtyi 52 px:n levyisenä vaikka sääntö sanoi 140. Sama koskee tornia ja kulhoa. */ .av__opaskortti .av__esittelykuva{display:block;width:100%;max-width:250px;height:auto;margin:0 auto 6px} .av__opaskortti .av__esittelykuva--noppa{max-width:128px} /* Apinakortti on neliö ja pienempi kuin apina, jotta kortti näyttää kortilta. */ .av__opaskortti .av__esittelykuva--kortti{max-width:140px;border-radius:12px;box-shadow:0 4px 12px rgba(60,30,0,.3)} /* Esittelyssä pizzakortti on kortti: pahvi takaisin, koska juuri se on se asia jota nimetään. Pelilaudalla se on pelkkä pyöreä pizza. */ .av__opaskortti .av__esittelykortti{width:140px;height:140px;border-radius:18px;margin:0 auto 6px;cursor:default; background:var(--warm,#FFF3E9);box-shadow:inset 0 0 0 2px var(--line2,#D6C7AF),0 3px 8px rgba(60,30,0,.18)} .av__opaskortti .av__esittelykortti .av__kortti-pizza{width:112px;height:112px} .av__opaskortti .av__esittelykortti .av__sydan{right:-2px;bottom:-2px} /* Torni ja kulho piirretään pelin omilla säännöillä; tässä vain mittakaava. */ .av__opaskortti .av__esittelytorni{display:block;margin:0 auto 6px;--pala:16px;--leveys:58px} .av__opaskortti .av__esittelytorni .av__torni{align-items:center} .av__opaskortti .av__esittelylinjasto{display:block;position:relative;height:160px;margin:0 auto 6px} .av__opaskortti .av__esittelykulho{position:absolute;left:50%;bottom:0;transform:translateX(-50%); width:104px;max-width:104px;margin:0;--pala:14px;--leveys:50px} .av__opaskortti .av__esittelykulho .av__hylly-torni{background:none;border:0;padding:0;bottom:78%} .av__opaskortti .av__vuoro{text-align:left;margin:4px 0 8px;padding-left:22px;font-size:16px} .av__opaskortti .av__vuoro li{margin:0 0 5px} .av__opaskortti .av__huomio{font-size:14px;color:var(--soft,#6E6357)} /* Osoitettu osa hohtaa, muu lauta himmenee. Sama kuvio ja sama hohtoanimaatio (`av-vihje`) kuin ohjatussa siirrossa, jossa oikea torni hohtaa ja muut saavat `av__paikka--himmea`n — ei kolmatta korostustapaa. ⚠️ `pointer-events` jätetään päälle: esittelyn napautus luetaan `juuri`ssa kaappausvaiheessa, ja himmennetyn osan napautuksen pitää tulla perille, jotta se voidaan vaimentaa. */ .av--esittely .av__vaimea{opacity:.3;filter:grayscale(.55);transition:opacity .3s,filter .3s} .av--esittely .av__osoita{animation:av-osoita 1.3s ease-in-out infinite;border-radius:14px} @keyframes av-osoita{0%,100%{filter:brightness(1);box-shadow:0 0 0 0 rgba(238,114,3,0)} 50%{filter:brightness(1.08);box-shadow:0 0 0 5px rgba(238,114,3,.55)}} @media (prefers-reduced-motion:reduce){ .av--esittely .av__osoita{animation:none;box-shadow:0 0 0 4px rgba(238,114,3,.6)}} /* Esittelyssä lauta on katseltavaa: osoitin ei lupaa napautusta muualla. */ .av--esittely .av__paikka--kulho,.av--esittely .av__kortti{cursor:default} .av--esittely .av__osoita .av__kortti,.av--esittely .av__noppa.av__osoita{cursor:pointer} /* Noppa on ympyrä, joten sen hohtokin on: nelikulmainen kehys näyttäisi vieraalta. */ .av--esittely .av__noppa.av__osoita{border-radius:50%} /* Matala ruutu (puhelin poikittain): sama kortti tiiviimpänä, jotta vieritystä tarvitaan mahdollisimman vähän. Rajana sama 520 px kuin pelin muussakin pystysuuntaisessa tiivistyksessä. */ @media (max-height:520px){ .av__opaskortti{padding:14px 18px 0;max-width:420px} .av__opaskortti h2{font-size:21px} .av__opaskortti p{font-size:14px;margin:0 0 4px} .av__opaskortti .av__lainaus{font-size:15px;margin:0 0 6px} .av__opaskortti .av__esittelykuva{max-width:128px;margin-bottom:2px} .av__opaskortti .av__esittelykuva--noppa{max-width:76px} .av__opaskortti .av__esittelykuva--kortti{max-width:80px} .av__opaskortti .av__esittelykortti{width:80px;height:80px;border-radius:12px;margin-bottom:2px} .av__opaskortti .av__esittelykortti .av__kortti-pizza{width:64px;height:64px} .av__opaskortti .av__esittelytorni{--pala:9px;--leveys:34px;margin-bottom:2px} .av__opaskortti .av__esittelylinjasto{height:92px;margin-bottom:2px} .av__opaskortti .av__esittelykulho{width:62px;max-width:62px;--pala:9px;--leveys:30px} .av__opaskortti .av__vuoro{font-size:14px;margin:2px 0 4px;padding-left:20px} .av__opaskortti .av__vuoro li{margin:0 0 3px} .av__opaskortti .av__huomio{font-size:12px} .av__opaskortti .av__opasnapit{margin-top:6px;padding:4px 0 12px} .av__opasnapit .av__vie{min-width:180px} }