/* Golf, Laajasalon tuloskortti. Minimalistinen, vaalea, vihreä korostuksena. Tumma tila data-teema-attribuutilla. */

:root {
  --tausta: #f6f5f0;
  --tausta-lasi: rgba(246, 245, 240, .88);
  --pinta: #ffffff;
  --pinta-2: #f0efe9;
  --viiva: #e4e2d9;
  --viiva-vahva: #cfcdc2;
  --teksti: #1c211d;
  --teksti-2: #6b716a;
  --teksti-3: #9a9f97;
  --vihrea: #1f6b3a;
  --vihrea-tayte: #1f6b3a;
  --vihrea-tumma: #17532c;
  --vihrea-vaalea: #e2eee6;
  --vihrea-hento: #f0f6f2;
  --punainen: #b3402f;
  --punainen-tausta: #fbeae7;
  --kulta: #b8892b;
  --kulta-vaalea: #f7e6a8;
  --kulta-teksti: #7a5a10;
  --c-hio: #b8892b;
  --c-birdie: #1a7f96;
  --c-par: #2e7d4a;
  --c-bogey: #c27a15;
  --c-tupla: #b3402f;
  --c-muu: #4d524f;
  --c-hio-tausta: #f7e6a8;
  --c-birdie-tausta: #e6f5f8;
  --c-par-tausta: #e2eee6;
  --c-bogey-tausta: #fdf1df;
  --c-tupla-tausta: #fbe9e5;
  --c-muu-tausta: #e9eae8;
  --huomautus-tausta: #fdf1df;
  --huomautus-teksti: #7a4d0b;
  --ilmoitus-tausta: #1d221e;
  --ilmoitus-teksti: #ffffff;
  --p-tausta: rgba(246, 245, 240, .97);
  --p-hehku-hio: #ffe58f;
  --p-hehku-birdie: #c9ecf3;
  --p-hehku-par: #d3eddc;
  --p-hehku-bogey: #ffe0b3;
  --p-hehku-tupla: #f6cdc4;
  --p-hehku-muu: #e3e5e1;
  --k-metsa: #2c7a44;
  --k-metsa-reuna: rgba(0, 0, 0, .28);
  --k-varjo: rgba(20, 40, 20, .28);
  --k-karkea: #9ad48f;
  --k-vayla: #e7f0d3;
  --k-vayla-valittu: #fbfff1;
  --k-viherio: #35b57e;
  --k-viherio-valittu: #22c77f;
  --k-viherio-reuna: #c4ead2;
  --k-bunkkeri: #eaa64f;
  --k-bunkkeri-reuna: #c9822e;
  --k-lampi: #4aa7ea;
  --k-lampi-vaalea: #a6dcf8;
  --k-lampi-reuna: #2f7fbf;
  --k-puro: #63b3ea;
  --k-puu: #1f6b3a;
  --k-puu-valo: #3f9a5a;
  --k-pensas: #5dbb6a;
  --k-parkki: #f1c24d;
  --k-parkki-viiva: rgba(255, 255, 255, .6);
  --k-tie: #b08a4a;
  --k-polku: #2b4a33;
  --k-talo: #2a2a2a;
  --k-talo-katto: #4d4d4d;
  --k-tii: #3a2a24;
  --k-tiipaikka: #bfe3ad;
  --k-linja: #2a2420;
  --k-numero: #1d221e;
  --k-numero-reuna: rgba(255, 255, 255, .75);
  --k-lippu: #e04b3a;
  --k-tanko: #f7f7f7;
  --k-merkki-tausta: #ffffff;
  --k-merkki-alku: #6b716a;
  --sade: 16px;
  --fontti: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fontti-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --safe-alas: env(safe-area-inset-bottom, 0px);
  --safe-ylos: env(safe-area-inset-top, 0px);
  color-scheme: light;
}

:root[data-teema="tumma"] {
  --tausta: #121613;
  --tausta-lasi: rgba(18, 22, 19, .86);
  --pinta: #1b211c;
  --pinta-2: #242c26;
  --viiva: #2d362f;
  --viiva-vahva: #3f4a41;
  --teksti: #eceee8;
  --teksti-2: #a4aba3;
  --teksti-3: #6f776f;
  --vihrea: #6ccc8a;
  --vihrea-tayte: #2f8d50;
  --vihrea-tumma: #257540;
  --vihrea-vaalea: #1f3a29;
  --vihrea-hento: #182b1f;
  --punainen: #f08573;
  --punainen-tausta: #3d1d18;
  --kulta: #e2b84c;
  --kulta-vaalea: #4a3b12;
  --kulta-teksti: #f3d68a;
  --c-hio: #e6c25a;
  --c-birdie: #5fc9dd;
  --c-par: #6fd18d;
  --c-bogey: #f2ab47;
  --c-tupla: #f2846f;
  --c-muu: #b9c0b8;
  --c-hio-tausta: #4a3b12;
  --c-birdie-tausta: #123a44;
  --c-par-tausta: #1f3a29;
  --c-bogey-tausta: #4a3210;
  --c-tupla-tausta: #4a1f18;
  --c-muu-tausta: #2e352f;
  --huomautus-tausta: #4a3210;
  --huomautus-teksti: #f5d9a6;
  --ilmoitus-tausta: #eceee8;
  --ilmoitus-teksti: #121613;
  --p-tausta: rgba(18, 22, 19, .97);
  --p-hehku-hio: #6a4d10;
  --p-hehku-birdie: #10404b;
  --p-hehku-par: #1c3d28;
  --p-hehku-bogey: #5a3a0c;
  --p-hehku-tupla: #5a1f16;
  --p-hehku-muu: #2a2f2b;
  --k-metsa: #1c452a;
  --k-metsa-reuna: rgba(0, 0, 0, .5);
  --k-varjo: rgba(0, 0, 0, .6);
  --k-karkea: #3f7f4c;
  --k-vayla: #6fa974;
  --k-vayla-valittu: #98cf9a;
  --k-viherio: #2fa873;
  --k-viherio-valittu: #3fd08f;
  --k-viherio-reuna: #58b58c;
  --k-bunkkeri: #c48f3f;
  --k-bunkkeri-reuna: #8f6526;
  --k-lampi: #2f7fbf;
  --k-lampi-vaalea: #63aee0;
  --k-lampi-reuna: #1f5a8c;
  --k-puro: #4b93cc;
  --k-puu: #143222;
  --k-puu-valo: #2a5e3c;
  --k-pensas: #3f8f4c;
  --k-parkki: #b8923a;
  --k-parkki-viiva: rgba(255, 255, 255, .4);
  --k-tie: #6f5730;
  --k-polku: #d9e2d5;
  --k-talo: #0f120f;
  --k-talo-katto: #303630;
  --k-tii: #0f0c0a;
  --k-tiipaikka: #7fb783;
  --k-linja: #0e0c0a;
  --k-numero: #f2f4ee;
  --k-numero-reuna: rgba(0, 0, 0, .65);
  --k-lippu: #ff6a57;
  --k-tanko: #e8e8e8;
  --k-merkki-tausta: #1b211c;
  --k-merkki-alku: #a4aba3;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--tausta); }
body {
  margin: 0;
  background: var(--tausta);
  color: var(--teksti);
  font-family: var(--fontti);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overscroll-behavior-y: none;
  transition: background .2s, color .2s;
}
#sovellus { max-width: 560px; margin: 0 auto; min-height: 100dvh; }
button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
button:disabled { opacity: .35; cursor: default; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0; }
input { font: inherit; }
[hidden] { display: none !important; }
.kuvake { flex: none; }

.nakyma { min-height: 100dvh; display: flex; flex-direction: column; padding-top: var(--safe-ylos); }

/* Napit */
.nappi {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: 16px;
  transition: transform .1s, background .15s, opacity .15s; white-space: nowrap;
}
.nappi:active { transform: scale(.98); }
.nappi.ensisijainen { background: var(--vihrea-tayte); color: #fff; }
.nappi.ensisijainen:active { background: var(--vihrea-tumma); }
.nappi.toissijainen { background: var(--pinta); border: 1px solid var(--viiva-vahva); color: var(--teksti); }
.nappi.toissijainen:active { background: var(--pinta-2); }
.nappi.vaarallinen { background: var(--punainen-tausta); color: var(--punainen); }
.nappi.iso { min-height: 56px; font-size: 17px; width: 100%; }
.nappi.pieni { min-height: 36px; padding: 0 14px; font-size: 14px; }
.nappi.teksti { background: none; color: var(--vihrea); padding: 0 8px; }

/* Yläpalkki */
.ylapalkki {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px; min-height: 56px;
  position: sticky; top: 0; z-index: 5;
  background: var(--tausta-lasi); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--viiva);
}
.ylapalkki h1 { font-size: 18px; flex: 1; text-align: center; padding-right: 72px; }
.takaisin { display: inline-flex; align-items: center; gap: 2px; color: var(--vihrea); font-weight: 600; font-size: 15px; min-height: 40px; min-width: 72px; }

.ylaotsikko { font-family: var(--fontti-serif); font-style: italic; color: var(--vihrea); font-size: 18px; letter-spacing: .01em; }
.tagi {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--vihrea); background: var(--vihrea-vaalea); padding: 3px 8px; border-radius: 999px; line-height: 1.3;
}
.tagi.muokattu { color: var(--c-bogey); background: var(--c-bogey-tausta); }
.tagi.merkannut { color: var(--teksti-2); background: var(--pinta-2); }
.ero.yli { color: var(--c-bogey); }
.ero.ali { color: var(--c-birdie); }
.ero.tasan { color: var(--teksti-2); }
.tyhja-tila { text-align: center; color: var(--teksti-2); padding: 48px 24px; }

/* Kirjautuminen */
.kirjaudu { justify-content: center; padding: 24px 20px calc(24px + var(--safe-alas)); gap: 20px; }
.kirjaudu-otsikko { text-align: center; }
.kirjaudu-otsikko h1 { font-size: 44px; letter-spacing: -0.03em; line-height: 1.05; }
.kirjaudu .lomake {
  background: var(--pinta); border: 1px solid var(--viiva); border-radius: 22px; padding: 26px 22px 22px;
  display: flex; flex-direction: column; gap: 16px;
}
.kentta label { display: block; font-size: 12px; font-weight: 700; color: var(--teksti-2); margin-bottom: 6px; letter-spacing: .06em; text-transform: uppercase; }
.kentta input, .lisaa-rivi input {
  width: 100%; min-height: 50px; border: 1px solid var(--viiva-vahva); border-radius: 12px; padding: 0 14px;
  font-size: 17px; background: var(--pinta); color: var(--teksti); -webkit-appearance: none; appearance: none;
}
.kentta input::placeholder, .lisaa-rivi input::placeholder { color: var(--teksti-3); }
.kentta input:focus, .lisaa-rivi input:focus { outline: 2px solid var(--vihrea); outline-offset: 0; border-color: transparent; }
.lomake .virhe { color: var(--punainen); font-size: 14px; font-weight: 600; }

/* Etusivu */
.koti-otsikko { padding: 28px 20px 8px; }
.koti-otsikko h1 { font-size: 44px; letter-spacing: -0.03em; line-height: 1; }
.kartta-kortti { margin: 10px 16px; background: var(--pinta); border: 1px solid var(--viiva); border-radius: var(--sade); padding: 10px 8px 4px; }
.kentta-tiedot { display: flex; gap: 14px; padding: 6px 8px 6px; color: var(--teksti-2); font-size: 14px; font-weight: 500; }
.koti .toiminnot { display: flex; flex-direction: column; gap: 10px; padding: 6px 16px; }
.koti-alatunniste { margin-top: auto; padding: 24px 8px calc(10px + var(--safe-alas)) 20px; display: flex; justify-content: space-between; align-items: center; color: var(--teksti-2); font-size: 14px; }
.alatunniste-napit { display: flex; align-items: center; gap: 2px; }
.teemanappi { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--teksti-2); }
.teemanappi:active { background: var(--pinta-2); }
.kesken { margin: 2px 16px 8px; padding: 14px 16px; background: var(--vihrea-hento); border: 1px solid var(--viiva); border-radius: var(--sade); }
.kesken h2 { font-size: 15px; color: var(--vihrea); }
.kesken p { color: var(--teksti-2); font-size: 14px; margin: 4px 0 12px; }
.kesken .rivi { display: flex; gap: 8px; }
.kesken .rivi .nappi { flex: 1; }

/* Uusi kierros */
.uusi .osio { padding: 16px 16px 4px; }
.osio h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--teksti-2); font-weight: 700; margin-bottom: 10px; }
.kentta-valinta { display: flex; align-items: center; gap: 12px; background: var(--pinta); border: 1.5px solid var(--vihrea); border-radius: var(--sade); padding: 12px 14px; }
.kentta-valinta .nimi { font-weight: 650; }
.kentta-valinta .pieni { color: var(--teksti-2); font-size: 13px; }
.kentta-valinta .merkki { margin-left: auto; color: var(--vihrea); display: inline-flex; }
.sirut { display: flex; flex-wrap: wrap; gap: 8px; }
.siru {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--viiva-vahva); background: var(--pinta); font-weight: 600; font-size: 15px; color: var(--teksti);
}
.siru.valittu { background: var(--vihrea-tayte); border-color: var(--vihrea-tayte); color: #fff; }
.siru.lisaa { color: var(--vihrea); border-style: dashed; }
.siru.reika { padding-right: 4px; gap: 8px; }
.siru.reika b { font-size: 16px; }
.siru.reika .pieni { color: var(--teksti-2); font-size: 12px; font-weight: 500; }
.siru-poista { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--teksti-3); }
.siru-poista:active { background: var(--pinta-2); }
.pelaajalista { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.pelaajalista .rivi { display: flex; align-items: center; gap: 4px; background: var(--pinta); border: 1px solid var(--viiva); border-radius: 12px; padding: 5px 6px 5px 12px; min-height: 48px; }
.pelaajalista .jarjestys { width: 24px; height: 24px; border-radius: 50%; background: var(--vihrea-vaalea); color: var(--vihrea); font-size: 12px; font-weight: 800; display: grid; place-items: center; margin-right: 6px; }
.pelaajalista .nimi { flex: 1; font-weight: 600; }
.pikkunappi { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--teksti-2); }
.pikkunappi:active { background: var(--pinta-2); }
.lisaa-rivi { display: flex; gap: 8px; margin-top: 10px; }
.lisaa-rivi input { flex: 1; min-width: 0; }
.pieni-ohje { color: var(--teksti-3); font-size: 13px; margin-top: 10px; }
.uusi .aloita { padding: 20px 16px calc(20px + var(--safe-alas)); margin-top: auto; }

/* Pelinäkymä: kiinteä yläosa */
.peli { padding-top: 0; }
.ylaosa {
  position: sticky; top: 0; z-index: 6; padding-top: var(--safe-ylos);
  background: var(--tausta-lasi); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--viiva);
}
.peli .ylapalkki { position: static; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 6px 8px 2px 16px; min-height: 50px; }
.ajastin-kehys { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 18px; letter-spacing: .01em; color: var(--teksti); }
.aika-taynna .ajastin-kehys { color: var(--punainen); }
.aika-taynna .ajastin-kehys::after { content: 'enimmäisaika'; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-left: 4px; }
.valikko-nappi { margin-left: auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--teksti); }
.valikko-nappi:active { background: var(--pinta-2); }

.pelaajarivi { display: flex; gap: 6px; padding: 2px 12px 8px; overflow-x: auto; scrollbar-width: none; }
.pelaajarivi::-webkit-scrollbar { display: none; }
.pelaajakortti {
  flex: 1 0 auto; display: flex; align-items: baseline; gap: 6px; min-height: 36px; padding: 5px 10px; border-radius: 10px;
  background: var(--pinta); border: 1px solid var(--viiva); text-align: left; min-width: 0;
}
.pelaajakortti.valittu { border-color: var(--vihrea); box-shadow: inset 0 0 0 1px var(--vihrea); }
.pelaajakortti .nimi { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pelaajakortti .lyonnit { font-weight: 800; font-size: 15px; margin-left: auto; }
.pelaajakortti .ero { font-size: 12px; font-weight: 700; min-width: 22px; text-align: right; }

.kartta-kehys { padding: 6px 12px 0; position: relative; }
.kartta-kehys.tiivis .kartta-zoom { width: 64%; margin: 0 auto; }
.kartta-koko { position: absolute; top: 8px; right: 14px; z-index: 3; width: 34px; height: 34px; border-radius: 10px; background: var(--pinta); border: 1px solid var(--viiva-vahva); display: grid; place-items: center; color: var(--teksti-2); box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .25); }
.kartta-koko:active { background: var(--pinta-2); }
.kortti-kehys { padding: 6px 12px 12px; }
.kortti { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--pinta); border: 1px solid var(--viiva); border-radius: 14px; overflow: hidden; }
.kortti th {
  font-size: 11px; font-weight: 700; color: var(--teksti-2); text-transform: uppercase; letter-spacing: .05em; padding: 9px 4px 7px;
  border-bottom: 1px solid var(--viiva); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 84px;
}
.kortti th.nro { text-align: left; padding-left: 12px; }
.kortti th.pelaaja.valittu { color: var(--vihrea); }
.kortti td { padding: 3px 3px; text-align: center; border-bottom: 1px solid var(--viiva); height: 46px; }
.kortti tbody tr:last-child td { border-bottom: 0; }
.kortti tr.valittu td { background: var(--vihrea-hento); }
.kortti td.nro { text-align: left; padding-left: 10px; width: 54px; white-space: nowrap; }
.reika-pallo { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pinta-2); font-weight: 800; font-size: 14px; }
tr.valittu .reika-pallo { background: var(--vihrea-tayte); color: #fff; }
.kortti td.nro sup { font-size: 10px; color: var(--teksti-2); margin-left: 2px; font-weight: 700; }
.kortti td.pituus, .kortti th.pituus { color: var(--teksti-3); font-size: 12px; width: 32px; }
.kortti td.poista, .kortti th.poista { width: 34px; padding-right: 6px; }
.kortti tr.yhteensa td { background: var(--pinta-2); font-weight: 700; height: 40px; }
.kortti tr.yhteensa td.nro { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--teksti-2); }
.poista-nappi { width: 30px; height: 30px; border-radius: 8px; color: var(--teksti-3); display: grid; place-items: center; }
.poista-nappi:active { background: var(--pinta-2); }
.lisaa-reika { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin-top: 8px; color: var(--vihrea); font-weight: 650; font-size: 15px; border: 1px dashed var(--viiva-vahva); border-radius: 12px; }
.lisaa-reika:active { background: var(--vihrea-hento); }

/* Tulossolut golfin merkintätavalla */
.tulos {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  font-weight: 800; font-size: 17px; position: relative; color: var(--teksti);
}
.tulos.tyhja::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--viiva-vahva); }
.tulos.hio { background: linear-gradient(135deg, #f0d271, #b8892b); color: #fff; border-radius: 50%; box-shadow: 0 2px 8px -2px rgba(184, 137, 43, .7); }
.tulos.birdie { color: var(--c-birdie); border-radius: 50%; box-shadow: inset 0 0 0 2px var(--c-birdie); }
.tulos.par { color: var(--c-par); }
.tulos.bogey { color: var(--c-bogey); box-shadow: inset 0 0 0 2px var(--c-bogey); border-radius: 8px; }
.tulos.tupla { color: var(--c-tupla); box-shadow: inset 0 0 0 2px var(--c-tupla), inset 0 0 0 4px var(--pinta), inset 0 0 0 5.5px var(--c-tupla); border-radius: 8px; }
.tulos.muu { background: var(--c-muu); color: var(--pinta); border-radius: 8px; }
.tulos.valittu { outline: 2.5px solid var(--vihrea); outline-offset: 2px; }
.tulos.valittu.tyhja { background: var(--pinta); }

/* Syöttöpaneeli */
.paneeli {
  position: sticky; bottom: 0; margin-top: auto; z-index: 4;
  background: var(--pinta); border-top: 1px solid var(--viiva); border-radius: 22px 22px 0 0;
  padding: 12px 16px calc(10px + var(--safe-alas));
  box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .35);
}
.paneeli-otsikko { display: flex; flex-direction: column; gap: 8px; }
.reika-tiedot { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.reika-nav { margin-left: auto; display: flex; gap: 6px; }
.reika-nav button { width: 34px; height: 32px; border-radius: 9px; background: var(--pinta-2); display: grid; place-items: center; color: var(--teksti); }
.reika-nav button:active { background: var(--viiva); }
.reika-nro { font-weight: 750; font-size: 17px; }
.reika-pituus { color: var(--teksti-2); font-size: 14px; }
.pelaajavalitsin { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.pelaajavalitsin::-webkit-scrollbar { display: none; }
.pelaajatabi {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px;
  background: var(--pinta-2); font-weight: 600; font-size: 14px; color: var(--teksti-2); white-space: nowrap;
}
.pelaajatabi.valittu { background: var(--vihrea-tayte); color: #fff; }
.pikku-tulos { font-size: 12px; font-weight: 800; background: var(--pinta); color: var(--teksti); border-radius: 999px; min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 5px; }
.pelaajatabi.valittu .pikku-tulos { background: rgba(255, 255, 255, .25); color: #fff; }

.syotto { display: grid; grid-template-columns: 54px 1fr 54px 66px; align-items: center; gap: 8px; margin: 6px 0 0; }
.pyorea { width: 54px; height: 54px; border-radius: 50%; background: var(--pinta-2); display: grid; place-items: center; color: var(--teksti); }
.pyorea:active { background: var(--viiva); }
.arvo { text-align: center; line-height: 1; min-height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.luku { font-size: 66px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--teksti); }
.luku.sykays { animation: sykays .22s ease-out; }
@keyframes sykays { 0% { transform: scale(1); } 40% { transform: scale(1.1); } 100% { transform: scale(1); } }
.luku-ohje { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teksti-3); margin-top: 6px; }
.vahvista {
  width: 66px; height: 66px; border-radius: 50%; background: var(--vihrea-tayte); color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 18px -8px rgba(31, 107, 58, .7); transition: transform .1s, background .15s;
}
.vahvista:active { transform: scale(.94); background: var(--vihrea-tumma); }
.paneeli.lukittu .vahvista { pointer-events: none; }

.liuku-kehys { padding: 4px 2px 0; }
.liuku { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0; display: block; --osuus: 18%; }
.liuku::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--vihrea-tayte) var(--osuus), var(--viiva) var(--osuus)); }
.liuku::-webkit-slider-thumb {
  -webkit-appearance: none; width: 34px; height: 34px; margin-top: -13px; border-radius: 50%;
  background: var(--pinta); border: 3px solid var(--vihrea-tayte); box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.liuku::-moz-range-track { height: 8px; border-radius: 999px; background: var(--viiva); }
.liuku::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--vihrea-tayte); }
.liuku::-moz-range-thumb { width: 34px; height: 34px; border-radius: 50%; background: var(--pinta); border: 3px solid var(--vihrea-tayte); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.asteikko { display: flex; justify-content: space-between; padding: 0 11px; font-size: 11px; color: var(--teksti-3); font-weight: 700; }
.asteikko span { width: 12px; text-align: center; }
.asteikko span.valittu { color: var(--vihrea); }
.vihje { font-size: 13px; font-weight: 600; color: var(--vihrea); background: var(--vihrea-hento); border-radius: 10px; padding: 8px 12px; margin-top: 8px; text-align: center; }

/* Kartan zoomaus */
.kartta-zoom { position: relative; overflow: hidden; border-radius: 12px; touch-action: pan-y; }
.kartta-zoom .kartta { will-change: transform; }
.kartta-zoom.zoomattu { box-shadow: inset 0 0 0 1px var(--viiva); }
.zoom-palauta {
  position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 12px; border-radius: 999px; background: var(--pinta); border: 1px solid var(--viiva-vahva);
  font-size: 13px; font-weight: 700; color: var(--teksti); box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .3);
}
.pieni-ohje.keskitetty { text-align: center; padding: 6px 0; }
.ohita { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ohita .pieni-ohje { max-width: 300px; text-align: center; margin-top: 0; }

/* Valikko */
.valikko-tausta { position: fixed; inset: 0; background: rgba(8, 12, 8, .38); z-index: 30; animation: haivytys-sisaan .15s both; }
.valikko {
  position: fixed; top: calc(8px + var(--safe-ylos)); right: 8px; width: min(300px, calc(100vw - 16px));
  background: var(--pinta); border: 1px solid var(--viiva); border-radius: 18px; padding: 6px; z-index: 31;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .5); transform-origin: top right;
  animation: valikko-sisaan .18s cubic-bezier(.2, 1.2, .4, 1) both;
}
@keyframes valikko-sisaan { from { opacity: 0; transform: scale(.92) translateY(-6px); } to { opacity: 1; transform: none; } }
.valikko-rivi { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 0 12px; border-radius: 12px; font-weight: 600; font-size: 16px; text-align: left; color: var(--teksti); }
.valikko-rivi:active { background: var(--pinta-2); }
.valikko-rivi .kuvake { color: var(--teksti-2); }
.valikko-rivi.vaarallinen, .valikko-rivi.vaarallinen .kuvake { color: var(--punainen); }
.valikko-erotin { height: 1px; background: var(--viiva); margin: 4px 8px; }
.kytkin { margin-left: auto; flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--viiva-vahva); position: relative; transition: background .2s; }
.kytkin::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.kytkin.paalla { background: var(--vihrea-tayte); }
.kytkin.paalla::after { transform: translateX(18px); }

/* Kesken olevan kierroksen palkki muissa näkymissä */
.kierrospalkki {
  display: flex; align-items: center; gap: 8px; margin: 10px 16px 0; padding: 8px 8px 8px 14px;
  background: var(--vihrea-hento); border: 1px solid var(--viiva); border-radius: 14px; font-size: 14px; font-weight: 600; color: var(--vihrea);
}
.kierrospalkki .aika { font-variant-numeric: tabular-nums; color: var(--teksti); font-weight: 700; }
.kierrospalkki .nappi { margin-left: auto; }

/* Kartta */
.kartta { width: 100%; height: auto; display: block; }
.kartta .metsa { fill: var(--k-metsa); stroke: var(--k-metsa-reuna); stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 8px 14px var(--k-varjo)); }
.kartta .latvukset circle { fill: rgba(0, 0, 0, .16); }
.kartta .latvukset .valo { fill: rgba(255, 255, 255, .07); }
.kartta .karkea path { fill: none; stroke: var(--k-karkea); stroke-linecap: round; stroke-linejoin: round; }
.kartta .karkea ellipse { fill: var(--k-karkea); }
.kartta .karkea-tekstuuri path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.kartta .saarekkeet ellipse { fill: var(--k-metsa); }
.kartta .purot path { fill: none; stroke: var(--k-puro); stroke-width: 3.5; stroke-linecap: round; opacity: .9; }
.kartta .parkki { fill: var(--k-parkki); }
.kartta .parkkiruudut { stroke: var(--k-parkki-viiva); stroke-width: 2.5; fill: none; }
.kartta .polku { stroke: var(--k-polku); stroke-width: 5; stroke-dasharray: 10 8; fill: none; }
.kartta .lampi-reuna { fill: var(--k-lampi-reuna); }
.kartta .lampi-valo { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 2.5; stroke-linecap: round; }
.kartta .hiekka { fill: var(--k-bunkkeri); stroke: var(--k-bunkkeri-reuna); stroke-width: 1.5; }
.kartta .pensaat circle { fill: var(--k-pensas); }
.kartta .pensaat .valo { fill: rgba(255, 255, 255, .2); }
.kartta .puut circle { fill: var(--k-puu); }
.kartta .puut .varjo { fill: rgba(0, 0, 0, .24); }
.kartta .puut .valo { fill: var(--k-puu-valo); }
.kartta .klubitalo .varjo { fill: rgba(0, 0, 0, .3); }
.kartta .klubitalo .seina { fill: var(--k-talo); }
.kartta .klubitalo .katto { fill: var(--k-talo-katto); }
.kartta .p-merkki rect { fill: #1a63c9; }
.kartta .p-merkki text { fill: #fff; font-weight: 800; font-size: 36px; text-anchor: middle; font-family: var(--fontti); }
.kartta .tie { fill: none; stroke: var(--k-tie); stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; }
.kartta .reika .osuma { fill: none; stroke: transparent; stroke-width: 110; stroke-linecap: round; pointer-events: none; }
.kartta.interaktiivinen .reika .osuma { pointer-events: stroke; }
.kartta.interaktiivinen .reika { cursor: pointer; outline: none; }
.kartta .vayla { fill: none; stroke: var(--k-vayla); stroke-linecap: round; }
.kartta .vayla-raidat { fill: none; stroke-linecap: round; }
.kartta .linja { stroke: var(--k-linja); stroke-width: 2.5; opacity: .85; }
.kartta .tiipaikka { fill: var(--k-tiipaikka); }
.kartta .viherio-reuna { fill: var(--k-viherio-reuna); }
.kartta .viherio { fill: var(--k-viherio); }
.kartta .lippu .kuppi { fill: #fff; stroke: rgba(0, 0, 0, .35); stroke-width: 1; }
.kartta .lippu .tanko { stroke: var(--k-tanko); stroke-width: 2.5; stroke-linecap: round; }
.kartta .lippu .kangas { fill: var(--k-lippu); }
.kartta .tii { fill: var(--k-tii); }
.kartta .numero { font-size: 40px; font-weight: 700; fill: var(--k-numero); font-family: var(--fontti); paint-order: stroke; stroke: var(--k-numero-reuna); stroke-width: 6; }
.kartta .reika { transition: opacity .2s; }
.kartta.korostus .reika:not(.valittu) { opacity: .82; }
.kartta .reika.valittu .vayla { stroke: var(--k-vayla-valittu); }
.kartta .reika.valittu .viherio { fill: var(--k-viherio-valittu); stroke: #fff; stroke-width: 4; }
.kartta .reika.valittu .viherio-reuna { fill: #fff; opacity: .9; }
.kartta .reika.valittu .numero { font-size: 56px; }
.kartta .reika.valittu .tii { stroke: #fff; stroke-width: 3; }
.kartta .reika.valittu .linja { stroke-width: 4; opacity: 1; }
.kartta .merkki rect { fill: var(--k-merkki-tausta); stroke: var(--teksti); stroke-width: 2.5; }
.kartta .merkki text { font-family: var(--fontti); text-anchor: middle; dominant-baseline: central; }
.kartta .merkki .alku { font-size: 21px; font-weight: 700; fill: var(--k-merkki-alku); }
.kartta .merkki .arvo { font-size: 30px; font-weight: 800; fill: var(--teksti); }
.kartta .merkki.hio rect { fill: #edc95c; stroke: #a87a1f; }
.kartta .merkki.hio .alku { fill: rgba(60, 40, 0, .7); }
.kartta .merkki.hio .arvo { fill: #3a2a00; }
.kartta .merkki.birdie rect { stroke: var(--c-birdie); fill: var(--c-birdie-tausta); }
.kartta .merkki.birdie .arvo { fill: var(--c-birdie); }
.kartta .merkki.par rect { stroke: var(--c-par); }
.kartta .merkki.par .arvo { fill: var(--c-par); }
.kartta .merkki.bogey rect { stroke: var(--c-bogey); fill: var(--c-bogey-tausta); }
.kartta .merkki.bogey .arvo { fill: var(--c-bogey); }
.kartta .merkki.tupla rect { stroke: var(--c-tupla); fill: var(--c-tupla-tausta); }
.kartta .merkki.tupla .arvo { fill: var(--c-tupla); }
.kartta .merkki.muu rect { fill: var(--c-muu); stroke: var(--c-muu); }
.kartta .merkki.muu .alku { fill: var(--pinta); opacity: .8; }
.kartta .merkki.muu .arvo { fill: var(--pinta); }
.kartta .merkki.tyhja rect { stroke: var(--teksti-3); stroke-dasharray: 6 4; }
.kartta .merkki.tyhja .arvo { fill: var(--teksti-3); }

/* Tulos ja kierroksen tiedot */
.tulosnakyma .tiedot { padding: 10px 16px 4px; color: var(--teksti-2); font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.tulosnakyma .tiedot > span { display: inline-flex; align-items: center; }
.huomautus { margin: 8px 16px 0; padding: 12px 14px; border-radius: 12px; background: var(--huomautus-tausta); color: var(--huomautus-teksti); font-size: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.huomautus.virhe { background: var(--punainen-tausta); color: var(--punainen); }
.pelaajakortit { display: grid; gap: 10px; padding: 8px 16px 4px; grid-template-columns: 1fr; }
.pelaajakortit.kaksi { grid-template-columns: 1fr 1fr; }
.tulospelaaja { background: var(--pinta); border: 1px solid var(--viiva); border-radius: var(--sade); padding: 14px 14px 10px; min-width: 0; }
.tulospelaaja.voittaja { border-color: var(--kulta); box-shadow: inset 0 0 0 1px var(--kulta); }
.tulospelaaja .nimi { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.voittaja-tagi { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--kulta-teksti); background: var(--kulta-vaalea); border-radius: 999px; padding: 2px 8px; }
.tulospelaaja .isot { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 8px; }
.tulospelaaja .lyonnit { font-size: 46px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.tulospelaaja .ero { font-size: 20px; font-weight: 700; }
.tilasto { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: var(--teksti-2); padding: 6px 0; border-top: 1px solid var(--viiva); }
.tilasto b { color: var(--teksti); font-weight: 650; text-align: right; }
.jakauma { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 8px; border-top: 1px solid var(--viiva); }
.jakauma span { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--pinta-2); }
.jakauma .hio { background: var(--c-hio-tausta); color: var(--kulta-teksti); }
.jakauma .birdie { background: var(--c-birdie-tausta); color: var(--c-birdie); }
.jakauma .par { background: var(--c-par-tausta); color: var(--c-par); }
.jakauma .bogey { background: var(--c-bogey-tausta); color: var(--c-bogey); }
.jakauma .tupla { background: var(--c-tupla-tausta); color: var(--c-tupla); }
.jakauma .muu { background: var(--c-muu-tausta); color: var(--c-muu); }
.tulosnakyma .toiminnot { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px calc(24px + var(--safe-alas)); }
.tulosnakyma .toiminnot .rivi { display: flex; gap: 10px; }
.tulosnakyma .toiminnot .rivi .nappi { flex: 1; padding: 0 10px; }
.tulosnakyma.muokkaus .toiminnot { padding-bottom: 12px; }

/* Historia */
.historia .lista { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px calc(24px + var(--safe-alas)); }
.kierrosrivi { display: block; background: var(--pinta); border: 1px solid var(--viiva); border-radius: 14px; padding: 12px 14px; }
.kierrosrivi:active { background: var(--pinta-2); }
.kierrosrivi .rivi1 { display: flex; justify-content: space-between; align-items: baseline; font-weight: 650; font-size: 15px; gap: 8px; }
.kierrosrivi .kesto { color: var(--teksti-2); font-weight: 500; font-size: 13px; white-space: nowrap; }
.kierrosrivi .rivi2 { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 14px; }
.kierrosrivi .rivi2 .nimi { font-weight: 600; }
.kierrosrivi .rivi2 .lyonnit { font-weight: 700; }
.kierrosrivi .tagit { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Dialogit ja ilmoitukset */
.dialogi {
  border: 0; border-radius: 20px; padding: 0; width: min(92vw, 380px); background: var(--pinta); color: var(--teksti);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .5); margin: auto;
}
.dialogi::backdrop { background: rgba(10, 14, 10, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dialogi-sisalto { padding: 22px 20px 18px; }
.dialogi h2 { font-size: 19px; margin-bottom: 6px; letter-spacing: -0.01em; }
.dialogi p { color: var(--teksti-2); font-size: 15px; }
.dialogi-napit { display: flex; gap: 10px; margin-top: 18px; }
.dialogi-napit .nappi { flex: 1; padding: 0 10px; }
.reikavalinta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.reikavalinta-nappi { display: flex; flex-direction: column; align-items: center; padding: 10px 0 8px; border-radius: 12px; background: var(--pinta-2); }
.reikavalinta-nappi .nro { font-size: 22px; font-weight: 800; }
.reikavalinta-nappi .pituus { font-size: 12px; color: var(--teksti-2); }
.reikavalinta-nappi:active { background: var(--vihrea-vaalea); }
.ilmoitus {
  position: fixed; top: calc(12px + var(--safe-ylos)); left: 50%; transform: translate(-50%, -16px);
  background: var(--ilmoitus-tausta); color: var(--ilmoitus-teksti); padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; max-width: 90vw; text-align: center;
}
.ilmoitus.nakyy { opacity: 1; transform: translate(-50%, 0); }
.ilmoitus.virhe { background: var(--punainen); color: #fff; }
@keyframes haivytys-sisaan { from { opacity: 0; } to { opacity: 1; } }

/* Tuloksen paljastus koko ruudulla: näyttämö ylhäällä, luku ja nimi alla */
.paljastus {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 0 16px; overflow: hidden; cursor: pointer;
  --p-vari: var(--c-par); --p-hehku: var(--p-hehku-par);
  --n-maa1: #82d38f; --n-maa2: #45a25a; --n-maa3: #2e7b42;
  animation: haivytys-sisaan .2s ease-out both;
}
:root[data-teema="tumma"] .paljastus { --n-maa1: #55a566; --n-maa2: #327f47; --n-maa3: #1f5a30; }
.paljastus.pois { animation: paljastus-ulos .24s ease-in both; }
.paljastus.hio { --p-vari: var(--c-hio); --p-hehku: var(--p-hehku-hio); }
.paljastus.birdie { --p-vari: var(--c-birdie); --p-hehku: var(--p-hehku-birdie); }
.paljastus.bogey { --p-vari: var(--c-bogey); --p-hehku: var(--p-hehku-bogey); }
.paljastus.tupla { --p-vari: var(--c-tupla); --p-hehku: var(--p-hehku-tupla); }
.paljastus.muu { --p-vari: var(--c-muu); --p-hehku: var(--p-hehku-muu); }
@keyframes paljastus-ulos { from { opacity: 1; } to { opacity: 0; } }
.paljastus-tausta { position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 50% 38%, var(--p-hehku) 0%, var(--p-tausta) 64%); }
.paljastus-kangas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.p-valahdys { position: absolute; inset: 0; z-index: 5; background: #fff; pointer-events: none; }
.p-valahdys.punainen { background: var(--c-tupla); }
.p-sateet {
  position: absolute; z-index: 1; width: 900px; height: 900px; margin: -450px 0 0 -450px; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 215, 100, 0) 0deg 9deg, rgba(255, 222, 130, .34) 12deg 15deg, rgba(255, 215, 100, 0) 18deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 30%, transparent 62%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 30%, transparent 62%);
}

/* Näyttämö ja viheriö perspektiivissä */
.p-nayttamo { position: relative; z-index: 3; width: 360px; max-width: 100%; height: 250px; perspective: 700px; flex: none; }
.p-nayttamo.par, .p-nayttamo.bogey, .p-nayttamo.tupla, .p-nayttamo.muu { height: 230px; }
.p-maa {
  position: absolute; left: 50%; top: 50%; border-radius: 50%; transform-style: preserve-3d;
  background: radial-gradient(ellipse at 50% 35%, var(--n-maa1) 0%, var(--n-maa2) 55%, var(--n-maa3) 100%);
  box-shadow: 0 40px 50px -30px rgba(0, 0, 0, .55), inset 0 -12px 30px rgba(0, 0, 0, .18);
}
.p-maa-raidat { position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 26px, rgba(0, 0, 0, .05) 26px 52px); }
.p-reika {
  position: absolute; width: 30px; height: 30px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 40%, #04070a 0%, #0b140c 60%, #1c3020 100%);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .9), 0 0 0 2px rgba(255, 255, 255, .35);
}
.p-reika.piilossa, .p-lippu.piilossa { visibility: hidden; }
.p-reika-rengas { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 50%; transform: translate(-50%, -50%) scale(.4); opacity: 0; }
.p-lippu { position: absolute; width: 3px; height: 74px; transform-origin: 50% 100%; transform: translate(-50%, -100%) rotateX(-58deg); }
.p-tanko { position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: linear-gradient(#f7f7f7, #b9b9b9); border-radius: 2px; box-shadow: 1px 0 2px rgba(0, 0, 0, .3); }
.p-viiri { position: absolute; left: 3px; top: 2px; width: 28px; height: 17px; background: linear-gradient(135deg, #ff6f52, #d63b2a); clip-path: polygon(0 0, 100% 50%, 0 100%); transform-origin: left center; }
.p-pallo {
  position: absolute; left: 0; top: 0; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #f4f4f4 30%, #cfcfcf 65%, #8f8f8f 100%);
  box-shadow: inset -3px -4px 6px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .18);
}
.p-pallo::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background-image: radial-gradient(circle, rgba(0, 0, 0, .1) .8px, transparent 1.5px); background-size: 5px 5px; }
.p-pallo.varjollinen { box-shadow: inset -3px -4px 6px rgba(0, 0, 0, .18), 0 9px 8px -3px rgba(0, 0, 0, .45); }
.p-pallo-merkki { position: absolute; left: 60%; top: 28%; width: 22%; height: 22%; border-radius: 50%; background: #c0392b; }
.p-varjo { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 70%); z-index: 1; }

/* Linnut */
.p-lintu { position: absolute; left: 0; top: 0; width: 110px; height: 64px; overflow: visible; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .28)); z-index: 3; }
.p-lintu.a { --l-runko: #1a7f96; --l-vatsa: #d3f0f6; --l-siipi: #136a7e; --l-siipi-taka: #0d5061; }
.p-lintu.b { --l-runko: #0f4f66; --l-vatsa: #b9e8f1; --l-siipi: #0b3d50; --l-siipi-taka: #072835; }
.p-lintu .runko, .p-lintu .pyrsto { fill: var(--l-runko); }
.p-lintu .vatsa { fill: var(--l-vatsa); }
.p-lintu .siipi { fill: var(--l-siipi); transform-origin: 54px 35px; animation: lapa .26s ease-in-out infinite alternate; }
.p-lintu .siipi.taka { fill: var(--l-siipi-taka); animation-delay: .07s; }
.p-lintu .nokka { fill: #f2b134; }
.p-lintu .silma { fill: #101010; }
.p-lintu .jalat { stroke: #f2b134; stroke-width: 2; fill: none; stroke-linecap: round; }
@keyframes lapa { from { transform: scaleY(1); } to { transform: scaleY(-.75); } }

/* Emojit */
.p-emoji-tausta { position: absolute; left: 50%; top: 46%; z-index: 0; font-size: 210px; line-height: 1; opacity: 0; transform: translate(-50%, -50%) scale(.5); pointer-events: none; }
.p-emoji-sade { position: absolute; z-index: 2; line-height: 1; opacity: 0; pointer-events: none; }

/* Luku, nimi ja konteksti */
.paljastus-sisalto { position: relative; z-index: 4; text-align: center; padding: 0 8px; }
.paljastus-luku, .paljastus-nimi, .paljastus-konteksti { position: relative; z-index: 1; }
.paljastus-luku { font-size: 132px; font-weight: 800; letter-spacing: -0.07em; line-height: 1; color: var(--p-vari); animation: luku-sisaan .75s cubic-bezier(.2, 1.6, .35, 1) var(--viive, 0ms) both; }
@keyframes luku-sisaan { 0% { transform: scale(.3) translateY(24px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.paljastus-nimi { font-family: var(--fontti-serif); font-style: italic; font-size: 50px; line-height: 1.1; color: var(--p-vari); margin-top: 2px; letter-spacing: .01em; white-space: nowrap; }
.paljastus-nimi span { display: inline-block; animation: kirjain .65s cubic-bezier(.2, 1.5, .35, 1) calc(var(--viive, 0ms) + .15s + var(--i) * 45ms) both; }
@keyframes kirjain { 0% { transform: translateY(36px) rotate(8deg) scale(.5); opacity: 0; filter: blur(4px); } 100% { transform: none; opacity: 1; filter: blur(0); } }
.paljastus-konteksti { margin-top: 14px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teksti-2); animation: haivytys-ylos .5s calc(var(--viive, 0ms) + .6s) both; }
@keyframes haivytys-ylos { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.paljastus.hio .paljastus-luku {
  font-size: 140px;
  background: linear-gradient(100deg, #8a6512 0%, #d9ac3c 28%, #fff2b8 50%, #d9ac3c 72%, #8a6512 100%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: luku-sisaan .8s cubic-bezier(.2, 1.6, .35, 1) var(--viive, 0ms) both, kiilto 1.8s linear calc(var(--viive, 0ms) + .5s) infinite;
  filter: drop-shadow(0 0 26px rgba(240, 190, 60, .6));
}
.paljastus.hio .paljastus-nimi {
  font-family: var(--fontti); font-style: normal; font-weight: 900; text-transform: uppercase; letter-spacing: .05em;
  font-size: clamp(30px, 10.5vw, 46px); perspective: 500px; margin-top: 6px;
}
.paljastus.hio .paljastus-nimi span {
  background: linear-gradient(100deg, #8a6512, #e0b444 40%, #fff2b8 50%, #e0b444 60%, #8a6512); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #8a6512) drop-shadow(0 7px 8px rgba(120, 80, 0, .35));
  animation: kirjain-3d .7s cubic-bezier(.2, 1.4, .4, 1) calc(var(--viive, 0ms) + .2s + var(--i) * 55ms) both, kiilto 2s linear calc(var(--viive, 0ms) + 1s + var(--i) * 50ms) infinite;
}
@keyframes kirjain-3d { 0% { transform: rotateX(85deg) translateY(30px) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes kiilto { 0% { background-position: 200% 0; } 100% { background-position: 0 0; } }

.paljastus.par .paljastus-luku { animation: luku-kaanto .7s cubic-bezier(.2, 1.2, .4, 1) var(--viive, 0ms) both; text-shadow: 0 8px 30px rgba(46, 125, 74, .35); }
@keyframes luku-kaanto { 0% { transform: perspective(500px) rotateY(90deg) scale(.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
.paljastus.bogey .paljastus-luku { animation: luku-tippuu .9s cubic-bezier(.3, 1.5, .5, 1) var(--viive, 0ms) both; }
@keyframes luku-tippuu { 0% { transform: translateY(-170px) rotate(-10deg); opacity: 0; } 60% { transform: translateY(14px) rotate(3deg); opacity: 1; } 100% { transform: none; } }
.paljastus.bogey .paljastus-nimi { animation: heilahdus .7s calc(var(--viive, 0ms) + .5s) both; }
@keyframes heilahdus { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 50% { transform: rotate(2.5deg); } 75% { transform: rotate(-1.5deg); } }
.paljastus.tupla .paljastus-luku, .paljastus.muu .paljastus-luku { animation: luku-isku .55s cubic-bezier(.1, .9, .2, 1) var(--viive, 0ms) both; }
@keyframes luku-isku { 0% { transform: scale(2.6); opacity: 0; filter: blur(6px); } 100% { transform: none; opacity: 1; filter: blur(0); } }
.paljastus.tupla .paljastus-sisalto { animation: tarina .5s calc(var(--viive, 0ms) + .3s) both; }
@keyframes tarina {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-9px, 3px); }
  40% { transform: translate(8px, -2px); }
  60% { transform: translate(-6px, 2px); }
  80% { transform: translate(3px, -1px); }
}
.paljastus.vahennetty * { animation: none !important; }
@media (max-height: 700px) {
  .p-nayttamo { height: 220px; transform: scale(.9); transform-origin: 50% 100%; }
  .paljastus-luku { font-size: 110px; }
  .paljastus.hio .paljastus-luku { font-size: 116px; }
  .paljastus-nimi { font-size: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}