/* Signaali, suunta C "Kirkas peli". Vaalea tausta, pullea pyöreä muoto, valot ovat isoja painettavia nappeja. */
@font-face{font-family:"Fredoka";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/fredoka-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/fredoka-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/fredoka-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/nunito-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/nunito-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:800;font-style:normal;font-display:swap;src:url(../fonts/nunito-latin-800-normal.woff2) format("woff2")}

:root{
  --pohja:#f1f8ff; --kortti:#ffffff; --ink:#1b2540; --himmea:#475574; --viiva:#cfe0f0; --viiva-2:#b4c6da;
  --sini:#3d6bff; --sini-pohja:#2548c9; --aurinko:#ffd43b; --sydan:#ff5a6e;
  --punainen:#ff5a6e; --vihrea:#3fd47a; --sininen:#5aa0ff; --keltainen:#ffd43b; --violetti:#b58cff; --turkoosi:#2fd6c8;
  --fokus:#1b2540;
  --otsikko:"Fredoka","Arial Rounded MT Bold",ui-rounded,system-ui,sans-serif;
  --fontti:"Nunito",ui-rounded,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--pohja);color:var(--ink);font-family:var(--fontti);font-size:1.0625rem;line-height:1.5;font-weight:600;min-height:100vh;min-height:100dvh;overflow-x:hidden}
/* pehmeät pyöreät taustamuodot: kiinteä, kosketuksia läpäisevä kerros */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(circle at 104% 6%,#fff1b8 0 96px,transparent 97px),radial-gradient(circle at -10% 46%,#d9f6e6 0 120px,transparent 121px),radial-gradient(circle at 108% 82%,#e4dcff 0 100px,transparent 101px)}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ohita{position:absolute;left:8px;top:-60px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:14px;z-index:10}
.ohita:focus{top:8px}
:focus-visible{outline:4px solid var(--fokus);outline-offset:3px}

.sivu{position:relative;z-index:1;max-width:34rem;margin:0 auto;padding:0 16px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.ylapalkki{padding:16px 0 4px}
.merkki{margin:0;display:flex;align-items:center;gap:10px;font-size:.9375rem;color:var(--himmea);font-weight:800}
.merkki-kyltti{background:var(--aurinko);color:var(--ink);font-family:var(--otsikko);font-weight:700;font-size:.9375rem;letter-spacing:.1em;padding:3px 12px;border-radius:999px;box-shadow:0 3px 0 #d9a900}
.paa{flex:1;padding:14px 0 14px;outline:none}
.naytto{display:flex;flex-direction:column;gap:16px}

h1{font-family:var(--otsikko);font-size:clamp(3.2rem,18vw,4.6rem);line-height:1;margin:0;font-weight:700;letter-spacing:.01em;text-align:center}
h2{font-family:var(--otsikko);font-size:2.4rem;line-height:1.05;margin:0;font-weight:700;text-align:center;outline:none}
h3{font-family:var(--otsikko);font-size:1.5rem;margin:0 0 4px;font-weight:600}
.ingressi{font-size:1.1875rem;margin:0;font-weight:700;text-align:center}
.apu{color:var(--himmea);font-size:.9375rem;margin:0;font-weight:600}

.kehys{display:flex;flex-direction:column;align-items:center;gap:6px}
.maskotti{width:8.5rem;height:auto;display:block}
@media (prefers-reduced-motion:no-preference){.maskotti{animation:keinu 2.8s ease-in-out infinite}}
@keyframes keinu{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-4px)}}

.ohjeet{margin:2px 0;padding:0;list-style:none;counter-reset:o;display:grid;gap:12px}
.ohjeet li{counter-increment:o;position:relative;padding:12px 14px 12px 4.1rem;min-height:4rem;background:var(--kortti);border:2px solid var(--viiva);border-radius:22px;box-shadow:0 4px 0 var(--viiva);font-weight:600}
.ohjeet li::before{content:counter(o);position:absolute;left:12px;top:12px;display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;font-family:var(--otsikko);font-weight:700;font-size:1.4rem;color:var(--ink);background:var(--sininen)}
.ohjeet li:nth-child(2)::before{background:var(--vihrea)}
.ohjeet li:nth-child(3)::before{background:var(--punainen)}
.toiminnot{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}

.nappi{font-family:var(--otsikko);font-weight:700;font-size:1.4rem;letter-spacing:.02em;min-height:62px;padding:12px 24px;border-radius:20px;border:0;background:var(--kortti);color:var(--sini);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-shadow:0 5px 0 var(--viiva-2)}
.paa-nappi{width:100%;background:var(--sini);color:#fff;box-shadow:0 6px 0 var(--sini-pohja)}
.nappi:active{transform:translateY(5px);box-shadow:0 1px 0 var(--sini-pohja)}
.ennatys-rivi{margin:0;color:var(--himmea);text-align:center}

/* Peli */
.mittarit{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:10px;margin-top:2px}
.mittari{margin:0;background:var(--kortti);border:2px solid var(--viiva);border-radius:18px;box-shadow:0 4px 0 var(--viiva);padding:6px 12px 6px;display:flex;flex-direction:column;min-height:64px}
.mittari-nimi{font-size:.8125rem;font-weight:800;color:var(--himmea)}
.mittari-arvo{font-family:var(--otsikko);font-weight:700;font-size:1.65rem;line-height:1.15;font-variant-numeric:tabular-nums}
.elamat{display:flex;gap:6px;align-items:center;height:2rem}
.elamat svg{width:1.55rem;height:1.55rem}
.elama-on{fill:var(--sydan)}
.elama-pois{fill:none;stroke:var(--viiva-2);stroke-width:2.2;stroke-dasharray:3 3}

.tavoite{display:flex;align-items:center;justify-content:center;gap:2px 12px;flex-wrap:wrap;background:var(--tv,var(--viiva));color:var(--ink);border-radius:26px;padding:14px 16px 16px;min-height:104px;text-align:center;box-shadow:0 6px 0 color-mix(in srgb,var(--tv,#9ab) 62%,#000)}
.tavoite-teksti{font-size:1rem;font-weight:800;width:100%;line-height:1.2}
.tavoite-teksti:last-child{width:auto}
.tavoite-kuva{order:1}
.tavoite-nimi{order:2}
.tavoite-teksti:last-child{order:3}
.tavoite-kuva svg{width:3.4rem;height:3.4rem;display:block;fill:var(--ink);background:#fff;border-radius:50%;padding:.55rem}
.tavoite-nimi{font-family:var(--otsikko);font-size:1.75rem;line-height:1.1;font-weight:700}
.tavoite.uusi{animation:tavoiteuusi .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes tavoiteuusi{0%{transform:scale(.94)}100%{transform:scale(1)}}

/* valot: pullea 3D-nappi, painuu alas painettaessa */
.ruudukko{display:grid;grid-template-columns:1fr 1fr;gap:14px 14px;padding:4px 0 8px}
.valo{position:relative;font:inherit;font-weight:800;color:var(--ink);background:var(--kortti);border:2px solid var(--viiva);border-radius:28px;min-height:138px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 8px 12px;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;box-shadow:0 7px 0 var(--viiva)}
.valo svg{width:3.7rem;height:3.7rem;flex:none;fill:var(--viiva-2);stroke:none}
.valo .valo-nimi{font-size:.875rem;font-weight:800;text-align:center;line-height:1.2}
.valo .valo-nro{position:absolute;top:8px;left:10px;display:grid;place-items:center;width:1.55rem;height:1.55rem;border-radius:50%;background:#eaf2fb;font-family:var(--otsikko);font-weight:600;font-size:.875rem;color:var(--himmea)}
.valo:active{transform:translateY(5px);box-shadow:0 2px 0 var(--viiva)}
.valo.palaa{background:var(--c);border-color:var(--c);box-shadow:0 7px 0 color-mix(in srgb,var(--c) 60%,#000);animation:pop .16s ease-out}
.valo.palaa svg{fill:var(--ink)}
.valo.palaa .valo-nro{background:#fff;color:var(--ink)}
/* 22.10. Sebastian: tavoiterengas pois, oikea valo tunnistetaan värin ja muodon perusteella. */
.valo.palaa:active{transform:translateY(5px);box-shadow:0 2px 0 color-mix(in srgb,var(--c) 60%,#000)}
.valo.osui{animation:osui .3s ease-out}
.valo.pieleen{border-color:var(--punainen);border-style:dashed;box-shadow:0 7px 0 var(--viiva)}
@keyframes pop{0%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes osui{0%{transform:scale(1.07)}100%{transform:scale(1)}}
.palaute{margin:0;text-align:center;font-family:var(--otsikko);font-size:1.5rem;font-weight:700;min-height:2.2rem;font-variant-numeric:tabular-nums}
.palaute.hyva{color:#14803f}
.palaute.huono{color:#cc2540}
.tauko{background:var(--kortti);border:3px solid var(--ink);border-radius:26px;padding:18px;display:grid;gap:12px;text-align:center}
.tauko p{margin:0;font-family:var(--otsikko);font-size:1.6rem;font-weight:700}

/* Loppu */
.uusi-ennatys{margin:0;align-self:center;background:var(--aurinko);color:var(--ink);font-family:var(--otsikko);font-size:1.3rem;font-weight:700;padding:4px 18px;border-radius:999px;transform:rotate(-3deg);box-shadow:0 4px 0 #d9a900}
.tulokset{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tulokset div{background:var(--kortti);border:2px solid var(--viiva);border-radius:22px;box-shadow:0 5px 0 var(--viiva);padding:10px 14px 10px;display:flex;flex-direction:column;justify-content:flex-end}
.tulokset .tulos-paa{grid-column:1/-1;background:var(--sini);border-color:var(--sini);box-shadow:0 6px 0 var(--sini-pohja);color:#fff;text-align:center;padding:14px}
.tulokset div:last-child{grid-column:1/-1}
.tulokset dt{font-size:.875rem;font-weight:800;color:var(--himmea);line-height:1.25}
.tulos-paa dt{color:#e6edff}
.tulokset dd{margin:2px 0 0;font-family:var(--otsikko);font-size:1.75rem;line-height:1.1;font-weight:700;font-variant-numeric:tabular-nums}
.tulos-paa dd{font-size:3.6rem;line-height:1}

.lomake{background:var(--kortti);border:2px solid var(--viiva);border-radius:26px;box-shadow:0 5px 0 var(--viiva);padding:18px;display:grid;gap:14px;margin-top:10px}
.kentta label{display:block;font-weight:800;margin-bottom:4px}
.valinnainen,.pakollinen{font-weight:600;color:var(--himmea);font-size:.875rem}
.kentta input{font:inherit;font-weight:600;font-size:1rem;width:100%;min-height:54px;padding:10px 14px;border-radius:16px;border:2px solid var(--viiva-2);background:var(--pohja);color:var(--ink)}
.kentta input[aria-invalid=true]{border-color:#cc2540}
.virhe{margin:4px 0 0;color:#b01e37;font-size:.9375rem;min-height:0}
.rasti{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.rasti input{width:28px;height:28px;margin:2px 0 0;accent-color:var(--sini)}
.rasti label{font-size:.9375rem;color:var(--himmea)}
.huomio{margin:0;font-size:.9375rem;color:var(--himmea);border-left:4px solid var(--viiva-2);padding-left:10px}
.rasti small{display:block;margin-top:4px}
.kentta .apu{margin-top:4px}
.kuppi{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.lomake-viesti{margin:0;min-height:1.4em}
.vihje-linkki{margin:8px 0 0;text-align:center}
.vihje-linkki a{color:var(--sini-pohja);font-weight:800;text-underline-offset:4px;display:inline-block;padding:12px 8px;min-height:48px}
a{color:var(--sini-pohja)}

.alatunniste{padding:14px 0 calc(16px + env(safe-area-inset-bottom));font-size:.875rem;color:var(--himmea);text-align:center}
.alatunniste p{margin:0}
.alatunniste a{color:var(--himmea);font-weight:800;text-underline-offset:3px;display:inline-block;padding:6px 2px}

/* Päivän haaste, kaverihaaste */
.toiminnot .nappi{flex:1 1 100%}
.valinta-selite,.keski{text-align:center}
.kaveri-banneri{margin:0;background:var(--aurinko);color:var(--ink);font-family:var(--otsikko);font-size:1.2rem;line-height:1.25;font-weight:600;text-align:center;padding:12px 16px;border-radius:22px;box-shadow:0 5px 0 #d9a900;overflow-wrap:anywhere}
.vanha-huomio{margin:0;background:var(--kortti);border:2px dashed var(--viiva-2);border-radius:18px;padding:10px 14px;color:var(--ink)}
.vertailu{margin:0;text-align:center;font-family:var(--otsikko);font-size:1.3rem;font-weight:700;line-height:1.25;background:var(--kortti);border:2px solid var(--ink);border-radius:22px;padding:10px 14px;overflow-wrap:anywhere}
.putki{margin:0;text-align:center;font-weight:800;background:#d9f6e6;border-radius:18px;padding:10px 14px}
.kaveri{background:var(--kortti);border:2px solid var(--viiva);border-radius:26px;box-shadow:0 5px 0 var(--viiva);padding:16px 18px;display:grid;gap:10px}
.kaveri label{font-weight:800}
.kaveri input{font:inherit;font-weight:600;font-size:1rem;width:100%;min-height:54px;padding:10px 14px;border-radius:16px;border:2px solid var(--viiva-2);background:var(--pohja);color:var(--ink)}
.kaveri .lomake-viesti{overflow-wrap:anywhere;font-size:.9375rem}

@media (min-width:700px){
  body{font-size:1.125rem}
  .valo{min-height:158px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .nappi:active,.valo:active,.valo.palaa:active{transform:none}
}