/* ==========================================================================
   KIPPIS VALIKOT 2026, peli/valikot.css

   Litteä yö. Painettu, ei valaistu. Latausjärjestys: /brand.css,
   styles.css, /fonts/poyta.css ja vasta sitten tämä (ei /fonts/fonts.css:ää).
   Säännöt, perustelut ja luokkien käyttö: DESIGN.md projektin juuressa.

   Rajaus: kaikki komponentit alkavat vk-, ja perustyylit koskevat vain
   .vk-juuren sisältöä. Jokainen valikkoruutu ja jokainen lehti kantaa
   luokkaa .vk, joten pelinäkymä ei muutu ennen omaa passiaan.

   Tässä tiedostossa ei ole liukuja, sumennusta, sumennettuja varjoja
   eikä versaalia. Pakan painokuvio tulee brand.css:n .pakka--<avain>
   -luokasta (--kuvio, --koko, --sijainti). Pakan kenttä tulee samasta
   luokasta tokenina --pk.
   ========================================================================== */

/* ---------- fontit ----------
   /peli ei lataa /fonts/fonts.css:ää (24 Playfair Display -julistusta, joita /peli ei
   käytä). DM Sans VF tulee /fonts/poyta.css:stä. Tässä vain DM Mono (pelinäkymän data)
   ja 'DM Sans' samaan muuttuvaan tiedostoon painoilla 400 ja 700 välillä, täsmälleen
   kuten fonts.css ne julisti, joten pelinäkymän teksti ei muutu. */
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/aFTU7PB1QTsUX8KYthSQBLyM.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/aFTU7PB1QTsUX8KYthqQBA.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/aFTR7PB1QTsUX8KYvumzEY2tbZX9.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/aFTR7PB1QTsUX8KYvumzEYOtbQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6h9Q.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* pinnat */
  --p-pohja: var(--kippis-yo);            /* #131016, ei koskaan #000 */
  --p-pinta: var(--kippis-yo-pinta);      /* #1B1721 lehti, kenttä, rivi */
  --p-pinta-2: var(--kippis-yo-pinta-2);  /* #242029 sisäkkäinen, painettu */
  --p-viiva: var(--kippis-yo-viiva);      /* #302A38 vain koriste */
  --p-raja: #786D7E;                      /* kentän ja sirun reuna, 3,6:1 pinnalla */
  /* teksti */
  --p-teksti: var(--kippis-yo-teksti);    /* #F4EFF3 16,6:1, ei koskaan #FFF */
  --p-himmea: var(--kippis-yo-himmea);    /* #9C909F 5,8:1 pinnalla */
  /* toiminto ja tila */
  --p-korostus: var(--kippis-pinkki);     /* #FF2D6F, yksi toiminto per ruutu */
  --p-korostus-muste: var(--kippis-yo);   /* muste pinkillä 5,26:1 */
  --p-virhe: #FF6B57;                     /* 6,7:1 pohjalla, 6,3:1 pinnalla */
  --p-ok: var(--pk-aloittelu);            /* 5,8:1 */
  /* paperilappu */
  --p-paperi: var(--kippis-yo-teksti);    /* #F4EFF3, vain esineille */
  --p-muste: var(--kippis-yo);            /* #131016 paperilla 16,6:1 */
  --p-siirto: 6px;                        /* kova pinkki siirtymä, ei sumennusta */
  /* Kulta */
  --p-kulta: var(--kippis-kulta-pinta);           /* #14101A musta kartonki */
  --p-kulta-kirjain: var(--kippis-kulta-hohde);   /* #C9A24B messinki 7,8:1 */
  --p-kulta-viiva: var(--kippis-kulta-reuna);     /* #6E5526 hiusviiva, ei tekstiä */
  /* lehti */
  --p-scrim: rgba(19, 16, 22, .72);
  --p-z-lehti: 9600;
  /* typografia */
  --p-fontti: 'DM Sans VF', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --p-mono: 'DM Mono', ui-monospace, 'Cascadia Mono', monospace;
  --t-juliste: 1000 clamp(40px, 11vw, 56px)/.9 var(--p-fontti);  /* ls -.045em */
  --t-otsikko: 780 28px/1.05 var(--p-fontti);                    /* ls -.032em */
  --t-iso: 700 20px/1.2 var(--p-fontti);                         /* ls -.02em */
  --t-nappi: 700 17px/1 var(--p-fontti);                         /* ls -.01em */
  --t-leipa: 450 16px/1.45 var(--p-fontti);
  --t-pieni: 500 14px/1.45 var(--p-fontti);
  /* mitat */
  --p-r: var(--kippis-r);                 /* 16px */
  --p-r-kortti: var(--kippis-r-kortti);   /* 18px */
  --p-r-sheet: 24px;
  --p-r-pilleri: var(--kippis-r-pilleri);
  --p-kohde: 56px;
  --p-kohde-min: 48px;
  --p-reuna: 20px;
  --p-sarake: 480px;
  /* liike */
  --p-nopea: var(--kippis-nopea);         /* 150ms */
  --p-hidas: var(--kippis-hidas);         /* 260ms */
  --p-ease: var(--kippis-ease);
}

/* ---------- perusta, vain .vk-juuren sisällä ---------- */
.vk {
  --pk: var(--p-korostus);
  background: var(--p-pohja);
  color: var(--p-teksti);
  font: var(--t-leipa);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vk :where(h1, h2, h3, h4, p, figure, fieldset) { margin: 0; }
.vk :where(button, input, select, textarea) { font: inherit; color: inherit; }
.vk :where(button) { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vk :where(a) { color: inherit; text-underline-offset: 4px; }
.vk :focus-visible { outline: 3px solid var(--p-teksti); outline-offset: 3px; }
.vk .ic { width: 24px; height: 24px; stroke-width: 2; vertical-align: middle; }
/* hidden piilottaa aina, vaikka komponentti asettaisi displayn (vk-nappi, vk-virhe). */
.vk[hidden], .vk [hidden] { display: none !important; }
.vk-nakymaton {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* styles.css:n .screen keskittää, lisää 16 px reunuksen ja häivyttää 0,3 s.
   Valikkoruudussa sarake alkaa ylhäältä, reunus tulee .vk-ruudusta ja vaihto on 160 ms. */
.screen.vk { align-items: stretch; justify-content: flex-start; padding: 0; transition: opacity 160ms var(--p-ease); }

/* Pakan kenttä samasta luokasta kuin painokuvio. */
.vk.pakka--aloittelu, .vk .pakka--aloittelu { --pk: var(--pk-aloittelu); }
.vk.pakka--overi, .vk .pakka--overi { --pk: var(--pk-overi); }
.vk.pakka--chill, .vk .pakka--chill { --pk: var(--pk-chill); }
.vk.pakka--noppa, .vk .pakka--noppa { --pk: var(--pk-noppa); }
.vk.pakka--kevat, .vk .pakka--kevat { --pk: var(--pk-kevat); }
.vk.pakka--kaaos, .vk .pakka--kaaos { --pk: var(--pk-kaaos); }
.vk.pakka--kuuma, .vk .pakka--kuuma { --pk: var(--pk-kuuma); }
.vk.pakka--pubivisa, .vk .pakka--pubivisa { --pk: var(--pk-pubivisa); }
.vk.pakka--fiksu, .vk .pakka--fiksu { --pk: var(--pk-fiksu); }

/* ---------- runko ---------- */
.vk-ruutu {
  display: flex; flex-direction: column; width: 100%; max-width: var(--p-sarake);
  min-height: 100vh; min-height: 100dvh; margin-inline: auto;
  padding-inline: var(--p-reuna); padding-block: env(safe-area-inset-top, 0px) 32px;
}
.vk-ylapalkki { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; }
.vk-merkki { display: inline-flex; align-items: center; gap: 10px; color: var(--p-korostus); line-height: 0; }
.vk-merkki svg { height: 26px; width: auto; }
.vk-nimikirjain {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--p-raja); border-radius: 50%; background: var(--p-pinta-2);
  color: var(--p-teksti); font: 780 19px/1 var(--p-fontti);
}
.vk-nimikirjain--iso { width: 56px; height: 56px; font-size: 22px; }
.vk-takaisin {
  display: inline-flex; align-items: center; gap: 6px; min-height: 48px; margin-left: -10px;
  padding: 0 14px 0 10px; border: 0; border-radius: var(--p-r-pilleri); background: none;
  color: var(--p-teksti); font: var(--t-nappi); letter-spacing: -.01em; text-decoration: none;
}
.vk-takaisin:active, .vk-nimikirjain:active { transform: scale(.97); }
.vk-alatunniste {
  display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 40px; padding-top: 12px;
  border-top: 1px solid var(--p-viiva); font: var(--t-pieni); color: var(--p-himmea);
}
.vk-alatunniste .vk-linkki { font: var(--t-pieni); font-weight: 600; }
.vk-alapalkki {
  position: sticky; bottom: 0; z-index: 5; margin-top: auto; margin-inline: calc(var(--p-reuna) * -1);
  padding: 12px var(--p-reuna) calc(14px + env(safe-area-inset-bottom));
  background: var(--p-pohja); border-top: 1px solid var(--p-viiva);
}
/* Nimiruudulla aloituspalkki on aina ruudun alareunassa: ei alareunusta palkin alle,
   jotta "Poistettu. Peru" (vk-ilmoitus--nimet) mahtuu palkin yläpuolelle. */
.vk-ruutu--nimet { padding-bottom: 0; }

/* ---------- typografia ---------- */
.vk-t-juliste { font: var(--t-juliste); letter-spacing: -.045em; }
.vk-t-otsikko { font: var(--t-otsikko); letter-spacing: -.032em; }
.vk-t-iso { font: var(--t-iso); letter-spacing: -.02em; }
.vk-t-nappi { font: var(--t-nappi); letter-spacing: -.01em; }
.vk-t-leipa { font: var(--t-leipa); }
.vk-t-pieni { font: var(--t-pieni); }
.vk-himmea { color: var(--p-himmea); }
.vk-mono { font-family: var(--p-mono); font-weight: 500; }
.vk-otsikko { font: var(--t-otsikko); letter-spacing: -.032em; margin: 4px 0 16px; }
.vk-otsikko:focus { outline: none; }
.vk-valiotsikko { font: var(--t-iso); letter-spacing: -.02em; margin: 32px 0 12px; }
.vk-ingressi { margin: 0 0 20px; max-width: 40ch; }

/* ---------- napit ja linkit ---------- */
/* Rako on sanaväli, jotta "Maksa <span class="vk-hinta">" ei saa tuplaväliä. Ikonit saavat oman marginaalin. */
.vk-nappi {
  display: flex; align-items: center; justify-content: center; gap: .3em; width: 100%;
  min-height: var(--p-kohde); padding: 8px 22px; border: 0; border-radius: var(--p-r-pilleri);
  font: var(--t-nappi); letter-spacing: -.01em; text-align: center; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--p-nopea) var(--p-ease), background-color var(--p-nopea) var(--p-ease);
}
.vk-nappi:active { transform: scale(.97); }
.vk-nappi + .vk-nappi { margin-top: 10px; }
.vk-nappi--pinkki { background: var(--p-korostus); color: var(--p-korostus-muste); }
.vk-nappi--pakka { background: var(--pk); color: var(--pk-muste); }
.vk-nappi--paperi { background: var(--p-paperi); color: var(--p-muste); }
.vk-nappi--reuna { background: transparent; color: var(--p-teksti); border: 2px solid var(--p-raja); }
.vk-nappi--reuna:active { background: var(--p-pinta-2); }
.vk-nappi--pieni { width: auto; min-height: var(--p-kohde-min); padding: 0 20px; }
.vk-nappi[aria-disabled="true"], .vk-nappi:disabled {
  background: var(--p-pinta-2); color: var(--p-teksti); border: 2px dashed var(--p-raja); cursor: default;
}
.vk-nappi[aria-disabled="true"]:active, .vk-nappi:disabled:active { transform: none; }
.vk-hinta { font: var(--t-iso); font-weight: 780; letter-spacing: -.02em; white-space: nowrap; }
.vk-nappi .vk-hinta { font: inherit; font-weight: 780; }
.vk .vk-nappi > .ic { margin-inline: 4px; }

.vk-linkki {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--p-kohde-min); padding: 0 4px;
  border: 0; background: none; color: var(--p-teksti); font: var(--t-leipa); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: var(--p-raja); cursor: pointer;
}
.vk-linkki:disabled, .vk-linkki[aria-disabled="true"] { color: var(--p-himmea); text-decoration: none; cursor: default; }
.vk-linkki--keski { display: flex; justify-content: center; margin-inline: auto; }
.vk-linkki--rivissa { display: inline; min-height: 0; padding: 0; font: inherit; font-weight: 700; }
.vk-linkit { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; }

/* ---------- kentät ---------- */
.vk-kentta { display: grid; gap: 8px; margin-top: 18px; }
.vk-label { display: block; font: var(--t-pieni); font-weight: 600; color: var(--p-teksti); }
input.vk-syote, textarea.vk-syote, select.vk-syote {
  width: 100%; min-width: 0; min-height: var(--p-kohde); padding: 0 16px;
  border: 1px solid var(--p-raja); border-radius: 14px; background-color: var(--p-pinta);
  color: var(--p-teksti); font: var(--t-leipa); font-size: 16px; font-weight: 500;
  -webkit-appearance: none; appearance: none; box-shadow: none; transition: none;
}
textarea.vk-syote { min-height: 112px; padding-block: 14px; resize: vertical; }
/* Valikko tarvitsee näkyvän nuolen, muuten se näyttää tekstikentältä. Viiva #9C909F. */
select.vk-syote {
  padding-right: 48px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%239C909F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
select.vk-syote:disabled { color: var(--p-himmea); cursor: default; }
input.vk-syote::placeholder, textarea.vk-syote::placeholder { color: var(--p-himmea); opacity: 1; }
input.vk-syote:focus, textarea.vk-syote:focus, select.vk-syote:focus {
  outline: 3px solid var(--p-teksti); outline-offset: 2px; border-color: var(--p-teksti);
  background-color: var(--p-pinta); box-shadow: none;
}
.vk-lehti input.vk-syote, .vk-lehti input.vk-syote:focus,
.vk-lehti textarea.vk-syote, .vk-lehti textarea.vk-syote:focus,
.vk-lehti select.vk-syote, .vk-lehti select.vk-syote:focus { background-color: var(--p-pohja); }
input.vk-syote[aria-invalid="true"] { border-color: var(--p-virhe); }
input.vk-syote--koodi {
  min-height: 68px; text-align: center; font-family: var(--p-mono); font-size: 28px; font-weight: 500;
  letter-spacing: .32em; padding-left: calc(16px + .32em);
}
.vk-syoterivi { display: flex; gap: 8px; }
.vk-syoterivi--nayta { position: relative; display: block; }
.vk-syoterivi--nayta input.vk-syote { padding-right: 104px; }
.vk-nayta {
  position: absolute; top: 4px; right: 4px; display: flex; align-items: center; gap: 6px;
  min-height: 48px; padding: 0 12px; border: 0; border-radius: 10px; background: none;
  color: var(--p-teksti); font: var(--t-pieni); font-weight: 700;
}
.vk-lisaa {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; padding: 0;
  border: 0; border-radius: 14px; background: var(--pk); color: var(--pk-muste);
}
.vk-lisaa:active { transform: scale(.97); }
.vk-apu { font: var(--t-pieni); color: var(--p-himmea); }
.vk-virhe { display: flex; gap: 8px; align-items: flex-start; font: var(--t-pieni); font-weight: 600; color: var(--p-virhe); }
.vk-virhe:empty { display: none; }
.vk .vk-virhe .ic { width: 20px; height: 20px; flex: none; }

.vk-ruksi {
  position: relative; display: flex; gap: 12px; align-items: flex-start; min-height: 48px;
  padding: 10px 0; cursor: pointer; font: var(--t-leipa);
}
.vk-ruksi input { position: absolute; left: 0; top: 10px; width: 28px; height: 28px; margin: 0; opacity: 0; cursor: pointer; }
.vk-ruksi-laatikko {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border: 2px solid var(--p-raja); border-radius: 8px; background: var(--p-pohja); color: var(--p-muste);
}
.vk .vk-ruksi-laatikko .ic { width: 20px; height: 20px; stroke-width: 3; opacity: 0; }
.vk-ruksi input:checked + .vk-ruksi-laatikko { background: var(--p-paperi); border-color: var(--p-paperi); }
.vk .vk-ruksi input:checked + .vk-ruksi-laatikko .ic { opacity: 1; }
.vk-ruksi input:focus-visible + .vk-ruksi-laatikko { outline: 3px solid var(--p-teksti); outline-offset: 3px; }
.vk-ruksi input[aria-invalid="true"] + .vk-ruksi-laatikko { border-color: var(--p-virhe); }
.vk-ruksi-teksti { flex: 1; }
.vk-ruksi-lisa { display: block; margin-top: 2px; font: var(--t-pieni); color: var(--p-himmea); }

.vk-erotin { display: flex; align-items: center; gap: 12px; margin: 18px 0 2px; font: var(--t-pieni); color: var(--p-himmea); }
.vk-erotin::before, .vk-erotin::after { content: ""; flex: 1; height: 1px; background: var(--p-viiva); }
/* Googlen oma renderButton. Tyhjä säiliö ei näy, eikä sen erotinkaan. */
/* color-scheme: light. Sivu on color-scheme dark, ja silloin selain maalaa Googlen iframelle
   valkoisen taustan, koska iframen sisältö on vaalea. Sama kaavio iframella tekee taustasta
   läpinäkyvän, eikä napin ympärille jää valkoista kehystä. */
.vk-google { display: flex; justify-content: center; min-height: 44px; margin-top: 16px; color-scheme: light; }
.vk-google iframe { color-scheme: light; }
.vk-google:empty, .vk-google[hidden], .vk-google:empty + .vk-erotin, .vk-google[hidden] + .vk-erotin { display: none; }
.vk-ilmoitusrivi { font: var(--t-pieni); color: var(--p-himmea); }
.vk-ilmoitusrivi a { color: var(--p-teksti); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- sirut ---------- */
.vk-sirut { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vk-siru {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 0 0 16px;
  border: 2px solid var(--pk); border-radius: var(--p-r-pilleri); background: var(--p-pinta);
  color: var(--p-teksti); font: var(--t-leipa); font-weight: 600;
}
.vk-siru--ei-poistoa { padding-right: 16px; }
.vk-siru-sina { margin-left: 5px; color: var(--p-himmea); font-weight: 500; }
.vk-siru-pois {
  display: grid; place-items: center; width: 48px; height: 48px; margin: -2px -2px -2px 0; padding: 0;
  border: 0; border-radius: 50%; background: none; color: inherit;
}
.vk .vk-siru-pois .ic { width: 20px; height: 20px; }
.vk .vk-siru-pois:focus-visible { outline-offset: -6px; }
/* Valintasirut, esimerkiksi Pubivisan joukkueet: role="radio" ja aria-checked. */
.vk-valitsin { display: flex; flex-wrap: wrap; gap: 8px; }
.vk-valitsin .vk-siru { justify-content: center; min-width: 56px; padding: 0 18px; background: transparent; font: var(--t-nappi); }
.vk-siru[aria-checked="true"], .vk-siru[aria-pressed="true"] { background: var(--pk); color: var(--pk-muste); }
.vk-valitsin .vk-siru:active { transform: scale(.97); }

/* Pubivisan jako nimiruudulla: kaksi palstaa, joukkue nimettynä himmeällä. */
.vk-joukkueet .vk-valiotsikko { margin: 24px 0 10px; }
.vk-jako { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 4px; padding: 0; }
.vk-jako li { min-width: 0; padding: 10px 14px 12px; border-radius: 12px; background: var(--p-pinta); font-weight: 600; overflow-wrap: anywhere; }
.vk-jako b { display: block; font: var(--t-pieni); font-weight: 700; color: var(--p-himmea); }

/* ---------- juliste, ruudun yksi iso esine ---------- */
.vk-juliste {
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; min-height: 320px; padding: 18px 20px 20px; overflow: hidden;
  border: 0; border-radius: var(--p-r-kortti); background: var(--pk); color: var(--pk-muste);
  font: var(--t-leipa); text-align: left; cursor: pointer;
  transition: transform var(--p-nopea) var(--p-ease);
}
.vk-juliste:active { transform: scale(.97); }
.vk-kuvio {
  position: absolute; top: 0; right: 0; z-index: -1; width: 44%; height: 118px;
  border-bottom-left-radius: 20px; pointer-events: none;
  background-image: var(--kuvio); background-size: var(--koko, auto); background-position: var(--sijainti, 0 0);
}
.vk-juliste-merkki { font: var(--t-pieni); font-weight: 700; margin: 0 0 66px; }
.vk-juliste-nimi { display: block; font: var(--t-juliste); letter-spacing: -.045em; white-space: nowrap; margin: 0 0 12px; }
.vk-juliste-syy { font: var(--t-leipa); font-weight: 600; max-width: 32ch; margin: 0 0 12px; }
.vk-juliste-vaiheet { display: flex; flex-wrap: wrap; font: var(--t-pieni); font-weight: 600; margin: 0 0 20px; }
.vk-juliste-vaiheet > * { white-space: nowrap; }
.vk-juliste-vaiheet > * + *::before { content: "/"; padding: 0 .4em; }
.vk-juliste-nappi {
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; margin-top: auto; padding: 0 22px;
  border-radius: var(--p-r-pilleri); background: var(--pk-muste); color: var(--pk);
  font: var(--t-nappi); letter-spacing: -.01em;
}
.vk-juliste--kulta { background: var(--p-kulta); color: var(--p-teksti); border: 1px solid var(--p-kulta-viiva); }
.vk-juliste--kulta .vk-juliste-nimi { color: var(--p-kulta-kirjain); }
.vk-juliste--kulta .vk-juliste-nappi { background: var(--p-paperi); color: var(--p-muste); }

/* ---------- rivit ja laatat ---------- */
.vk-rivit { display: flex; flex-direction: column; gap: 8px; }
.vk-rivit--lava { margin-top: 12px; }
.vk-rivi {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 12px;
  border: 0; border-radius: var(--p-r); background: var(--p-pinta); color: var(--p-teksti);
  font: var(--t-leipa); text-align: left; text-decoration: none; cursor: pointer;
  transition: transform var(--p-nopea) var(--p-ease), background-color var(--p-nopea) var(--p-ease);
}
.vk-rivi:active { transform: scale(.97); background: var(--p-pinta-2); }
.vk-laatta { position: relative; overflow: hidden; flex: none; width: 48px; height: 48px; border-radius: 12px; background-color: var(--pk); }
.vk-laatta::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--kuvio); background-size: var(--koko, auto); background-position: var(--sijainti, 0 0);
}
.vk-laatta--kulta { background-color: var(--p-kulta); border: 1px solid var(--p-kulta-viiva); }
.vk-laatta--lava { display: grid; place-items: center; background-color: var(--p-pohja); border: 1px solid var(--p-raja); color: var(--p-teksti); }
.vk-laatta--lava::before { content: none; }
/* Keltaisella kausikentällä valkoinen painokuvio katoaa, joten se painetaan musteella. */
.vk .pakka--kevat .vk-kuvio, .vk.pakka--kevat .vk-kuvio,
.vk .pakka--kevat .vk-laatta::before, .vk .vk-laatta.pakka--kevat::before { filter: invert(1); }
.vk-rivi-teksti { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vk-rivi-nimi { font: var(--t-iso); letter-spacing: -.02em; }
.vk-rivi-kuvaus { font: var(--t-pieni); color: var(--p-himmea); }
.vk-rivi-taso { display: inline-flex; align-items: center; gap: 4px; font: var(--t-pieni); font-weight: 600; color: var(--p-himmea); }
.vk .vk-rivi-taso .ic { width: 16px; height: 16px; }
.vk-rivi-taso--kulta { color: var(--p-kulta-kirjain); }
.vk-rivi-nuoli { flex: none; color: var(--p-himmea); line-height: 0; }

/* ---------- omistajan hylly ---------- */
.vk-hylly-paa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 0 0 12px; }
.vk-hylly-otsikko { font: var(--t-iso); letter-spacing: -.02em; color: var(--p-kulta-kirjain); }
.vk-hylly-tila { font: var(--t-pieni); font-weight: 600; }
.vk-hylly .vk-rivit { margin-top: 8px; }
/* Maksanut vieras ilman tiliä: yksi hiljainen laatikko hyllyn alla. */
.vk-liitos { margin-top: 12px; padding: 14px 16px 4px; border: 1px solid var(--p-kulta-viiva); border-radius: var(--p-r); background: var(--p-pinta); }
.vk-liitos p { font: var(--t-pieni); }
.vk-liitos .vk-linkki { margin-left: -4px; }

/* ---------- Kulta, musta kartonki ja messinkihiusviiva ---------- */
.vk-kulta {
  margin-top: 24px; padding: 20px 18px 18px; border: 1px solid var(--p-kulta-viiva);
  border-radius: var(--p-r-kortti); background: var(--p-kulta); color: var(--p-teksti);
}
.vk-kulta-otsikko { font: var(--t-iso); letter-spacing: -.02em; color: var(--p-kulta-kirjain); }
.vk-kulta-teksti { margin-top: 6px; }
.vk-kulta-paattyi { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--p-viiva); font-weight: 600; }
.vk-kulta-kokeilu { margin-top: 14px; font: var(--t-pieni); font-weight: 600; }
.vk-kulta-toimet { display: grid; gap: 10px; margin-top: 18px; }
.vk-kulta-toimet .vk-nappi + .vk-nappi { margin-top: 0; }
.vk-kulta .vk-rivit { gap: 0; margin-top: 12px; }
.vk-kulta .vk-rivi { background: transparent; border-top: 1px solid var(--p-viiva); border-radius: 0; padding-inline: 0; }
.vk-kulta-laatikko { padding: 14px 16px; border: 1px solid var(--p-kulta-viiva); border-radius: var(--p-r); background: var(--p-kulta); font-weight: 600; }

/* Ostolehden valintakortit. Hinta 20 px, ei koskaan pienin teksti. */
.vk-valinnat { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.vk-valinta {
  position: relative; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 2px 12px;
  min-height: 72px; padding: 12px 16px; border: 2px solid var(--p-raja); border-radius: var(--p-r);
  background: var(--p-pohja); cursor: pointer;
}
.vk-valinta input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.vk-valinta-radio { grid-row: 1 / 3; width: 24px; height: 24px; border: 2px solid var(--p-raja); border-radius: 50%; }
.vk-valinta:has(input:checked), .vk-valinta--valittu { border-color: var(--p-teksti); }
.vk-valinta input:checked ~ .vk-valinta-radio, .vk-valinta--valittu .vk-valinta-radio { border: 7px solid var(--p-teksti); }
.vk-valinta input:focus-visible ~ .vk-valinta-radio { outline: 3px solid var(--p-teksti); outline-offset: 3px; }
.vk-valinta-nimi { font: var(--t-iso); font-size: 18px; }
.vk-valinta-hinta { font: var(--t-iso); letter-spacing: -.02em; text-align: right; white-space: nowrap; }
.vk-valinta-rivi { grid-column: 2 / 4; font: var(--t-pieni); color: var(--p-himmea); }
.vk-kuittaus { margin-top: 12px; font: var(--t-pieni); color: var(--p-himmea); }

/* Vaiheportaat litteinä, paino ja koko kasvavat vaihe vaiheelta. */
.vk-portaat { list-style: none; margin: 16px 0 0; padding: 10px 0 0; border-top: 2px solid currentColor; }
.vk-portaat li { padding: 6px 0; font-family: var(--p-fontti); font-size: 16px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.vk-portaat li + li { border-top: 1px solid var(--p-viiva); }
.vk-portaat li:nth-child(2) { font-size: 18px; font-weight: 650; }
.vk-portaat li:nth-child(3) { font-size: 20px; font-weight: 800; }
.vk-portaat li:nth-child(n+4) { font-size: 22px; font-weight: 950; }
.vk-kulta .vk-portaat, .vk-lehti--kulta .vk-portaat { border-top-color: var(--p-kulta-viiva); }
/* Kulta-lehti: pakan nimi messinkikirjaimin. Napit ja hinnat pysyvät tavallisina. */
.vk-lehti--kulta .vk-lehti-otsikko { color: var(--p-kulta-kirjain); }

/* ---------- lehti (bottom sheet) ---------- */
.vk-scrim { position: fixed; inset: 0; z-index: var(--p-z-lehti); background: var(--p-scrim); animation: vk-ilmesty 160ms var(--p-ease); }
.vk-lehti {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--p-z-lehti) + 1);
  max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px var(--p-reuna) calc(24px + env(safe-area-inset-bottom));
  border-radius: var(--p-r-sheet) var(--p-r-sheet) 0 0; background: var(--p-pinta);
  animation: vk-nousee 200ms var(--p-ease);
}
.vk-lehti-kahva { width: 40px; height: 4px; margin: 0 auto 6px; border-radius: 2px; background: var(--p-raja); }
.vk-lehti-sulje {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 48px; height: 48px;
  padding: 0; border: 0; border-radius: 50%; background: var(--p-pinta-2); color: var(--p-teksti);
}
.vk-lehti-otsikko { font: var(--t-otsikko); letter-spacing: -.032em; margin: 14px 60px 10px 0; }
.vk-lehti-otsikko:focus { outline: none; }
.vk-lehti-johdanto { margin: 0 0 20px; }
.vk-lehti-valiotsikko { margin: 24px 0 8px; font: var(--t-pieni); font-weight: 700; color: var(--p-teksti); }
.vk-lehti-kappale { margin-top: 18px; }
.vk-lehti .vk-nappi { margin-top: 14px; }
.vk-lehti .vk-nappi + .vk-nappi { margin-top: 10px; }
/* Lehden pinta on sama kuin rivin, joten lehdessä rivi painetaan pohjan värillä. */
.vk-lehti .vk-rivi { background: var(--p-pohja); }
.vk-lehti .vk-rivi:active { background: var(--p-pinta-2); }
.vk-lehti .vk-kulta-laatikko, .vk-lehti .vk-valinnat { margin-top: 18px; }
/* Oman tilin lehden pää: nimikirjain, nimi ja tila. */
.vk-tili-paa { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 14px; margin: 14px 60px 18px 0; }
.vk-tili-paa .vk-nimikirjain { grid-row: 1 / 3; }
.vk-tili-paa .vk-lehti-otsikko { margin: 0; overflow-wrap: anywhere; }
.vk-tili-paa .vk-lehti-johdanto { margin: 0; font: var(--t-pieni); color: var(--p-himmea); }

/* Vanhat .modal-ikkunat (säännöt, ehdotus, asennusohje) lehden näköisinä. styles.css:n
   .modal hoitaa näyttämisen (.active) ja taustan napautuksen. Sisältö on .vk-arkki eikä
   .vk-lehti: ".vk-lehti:not([hidden])" tarkoittaa aina auki olevaa dynaamista lehteä,
   ja service workerin päivitys ja testit nojaavat siihen. Arkki näyttää samalta. */
.modal.vk-modaali { z-index: var(--p-z-lehti); background: var(--p-scrim); transition: opacity 160ms var(--p-ease); }
.vk-arkki {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--p-z-lehti) + 1);
  max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px var(--p-reuna) calc(24px + env(safe-area-inset-bottom));
  border-radius: var(--p-r-sheet) var(--p-r-sheet) 0 0; background: var(--p-pinta); color: var(--p-teksti);
  animation: vk-nousee 200ms var(--p-ease);
}
.vk-arkki .vk-nappi { margin-top: 14px; }
.vk-arkki .vk-nappi + .vk-nappi { margin-top: 10px; }
.vk-arkki input.vk-syote, .vk-arkki textarea.vk-syote, .vk-arkki select.vk-syote,
.vk-arkki input.vk-syote:focus, .vk-arkki textarea.vk-syote:focus, .vk-arkki select.vk-syote:focus { background-color: var(--p-pohja); }
@media (min-width: 720px) {
  .vk-arkki { left: 50%; right: auto; top: 50%; bottom: auto; width: 460px; max-height: 88vh; padding-bottom: 24px; border-radius: var(--p-r-sheet); transform: translate(-50%, -50%); animation: vk-ilmesty 160ms var(--p-ease); }
  .vk-arkki .vk-lehti-kahva { display: none; }
}

/* ---------- paperilappu: paperi, muste ja kova pinkki siirtymä ----------
   Enintään yksi per ruutu, vain ruudun tärkeimmälle esineelle. Ei hinnoille,
   ei ostonapeille, ei yleiseksi korttityyliksi. Katso DESIGN.md. */
.vk-paperilappu {
  position: relative; display: block; margin: 0 var(--p-siirto) calc(var(--p-siirto) + 16px) 0;
  padding: 14px 18px; border-radius: 14px; background: var(--p-paperi); color: var(--p-muste);
  box-shadow: var(--p-siirto) var(--p-siirto) 0 0 var(--p-korostus);
}
/* YKSI LAPPU KERRALLAAN, MYÖS LEHDEN KANSSA (korjattu 21.9.2026).

   DESIGN.md luku 6: enintään yksi paperilappu per ruutu, lehti mukaan lukien.
   Nimiruudulla on nimipinon lappu, ja Kippis TV -lehti tuo oman osoitelappunsa,
   joten ruudulla oli kaksi: DESIGN.md:n oma tarkistus laski 2 kaikilla kolmella
   koolla. avaaLehti (valikot.js) merkitsee taustan body-lapset inertiksi, joten
   tämä sääntö osuu jokaiseen lehden ja ruudun pariin eikä vain TV:hen. Taustan
   lappu pysyy paikallaan mitalleen ja luopuu vain paperista, musteesta ja
   pinkistä siirtymästä, joten mikään ei liiku lehden auetessa. Paperi palaa kun
   lehti sulkeutuu ja inert poistuu. */
[inert] .vk-paperilappu { background: transparent; color: var(--p-teksti); box-shadow: none; }
.vk-paperilappu :focus-visible { outline-color: var(--p-muste); }
.vk-paperilappu .vk-linkki { color: var(--p-muste); text-decoration-color: currentColor; }
.vk-paperilappu--osoite { font-weight: 1000; font-size: clamp(24px, 8vw, 36px); line-height: 1.1; letter-spacing: -.03em; overflow-wrap: anywhere; }
.vk-paperilappu--merkki { display: inline-block; align-self: flex-start; width: max-content; padding: 10px 16px 12px; font-weight: 1000; font-size: 56px; line-height: .9; letter-spacing: -.05em; }
.vk-paperilappu--koodi { font-family: var(--p-mono); font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: .08em; overflow-wrap: anywhere; }
/* jäsenkortti "Tili on auki" */
.vk-paperilappu--kortti {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto;
  width: min(300px, calc(100% - var(--p-siirto))); aspect-ratio: 1.586; padding: 16px 18px;
}
.vk-kortti-laji { grid-column: 2; font: var(--t-pieni); font-weight: 700; text-align: right; }
.vk-kortti-nimi { grid-column: 1 / -1; align-self: end; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 1000; font-size: 40px; line-height: 1; padding-top: .1em; letter-spacing: -.04em; }
.vk-kortti-nimi--pitka { font-size: 30px; }
.vk-kortti-ala { grid-column: 1 / -1; margin-top: 2px; font: var(--t-pieni); font-weight: 600; }
/* nimiruudun pakka ja nimipino */
.vk-paperilappu--pino { overflow: hidden; padding: 12px 12px 14px 14px; view-transition-name: pakka; }
.vk-pino-paa { display: flex; align-items: center; gap: 12px; }
.vk-pino-pakka { flex: 1; min-width: 0; font: var(--t-iso); font-weight: 780; letter-spacing: -.02em; }
.vk-pino { list-style: none; margin: 12px -40px 0 0; padding: 0; }
.vk-pino li { display: block; white-space: nowrap; font-weight: 1000; font-size: clamp(36px, 11vw, 48px); line-height: .95; letter-spacing: -.045em; }
.vk-pino .vk-pino-uusin { display: inline-block; margin-left: -.12em; padding: 0 .12em; background: var(--pk); color: var(--pk-muste); animation: vk-pinoon var(--p-nopea) var(--p-ease); }
.vk-pino-tyhja { font: var(--t-leipa); font-weight: 600; margin-top: 10px; }

/* ---------- kahden pisteen merkki ja latausruutu ---------- */
.vk-pisteet { --vk-piste: 12px; display: inline-flex; align-items: flex-end; gap: calc(var(--vk-piste) / 2); height: calc(var(--vk-piste) * 2); color: var(--p-korostus); }
.vk-pisteet i { display: block; width: var(--vk-piste); height: var(--vk-piste); border-radius: 50%; background: currentColor; transform: translateY(0); transition: transform var(--p-hidas) var(--p-ease); }
.vk-pisteet i + i { transform: translateY(calc(var(--vk-piste) / -2)); transition-delay: 60ms; }
.vk-pisteet--iso { --vk-piste: 20px; }
/* 18+: lepotilassa lasit ovat pöydällä. JS poistaa luokan vahvistuksessa. */
.vk-pisteet--lepo i, .vk-pisteet--lepo i + i { transform: translateY(calc(var(--vk-piste) / 2)); }
.vk-lataus { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; align-content: center; gap: 24px; background: var(--p-pohja); transition: opacity 160ms var(--p-ease); }
/* Diagnostiikka kirjoittaa latausruutuun kaatuneen skriptin virheen. Mono, koska se on dataa. */
.vk-lataus-virhe { max-width: calc(100vw - 40px); font: var(--t-pieni); font-family: var(--p-mono); color: var(--p-virhe); text-align: center; overflow-wrap: anywhere; }

/* ---------- 18+-ruutu ---------- */
.vk-saannot { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.vk-saannot li { position: relative; padding-left: 22px; }
.vk-saannot li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 7px; height: 7px; border-radius: 2px; background: var(--p-himmea); }
.vk-apulaatikko { margin-top: 22px; padding: 14px 16px; border-radius: var(--p-r); background: var(--p-pinta); }
.vk-apulaatikko a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.vk-apulaatikko + .vk-nappi { margin-top: 24px; }

/* ---------- pienet pinnat ---------- */
.vk-pinta { padding: 14px 16px; border-radius: var(--p-r); background: var(--p-pinta); }
.vk-huomio { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--p-pinta); font: var(--t-pieni); }
.vk .vk-huomio .ic { width: 20px; height: 20px; color: var(--pk); }
.vk-sama {
  display: grid; grid-template-columns: 48px 1fr; gap: 4px 14px; align-items: center;
  margin: 0 0 24px; padding: 14px; border-radius: var(--p-r-kortti); background: var(--p-pinta);
}
.vk-sama .vk-nappi { grid-column: 1 / -1; margin-top: 10px; }
.vk-sama-teksti { min-width: 0; }
.vk-sama-otsikko { font: var(--t-pieni); color: var(--p-himmea); }
.vk-sama-rivi { font-weight: 600; }
/* Unohda kortin alla keskellä ja omistajan rivin alla (vaihe 3). */
.vk-sama .vk-sama-unohda { grid-column: 1 / -1; justify-self: center; }
.vk-rivit--sama { margin-top: 12px; }
.vk-rivit--sama .vk-sama-unohda { align-self: center; }
/* Nimiruutu: nimet tallessa yhtenä rivinä "Mikko, Anni ja Jussi. Muokkaa" ja Pelaa taas (vaihe 3). */
.vk-tiivis {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-height: var(--p-kohde);
  margin: 0 0 8px; padding: 4px 8px 4px 16px; border-radius: var(--p-r); background: var(--p-pinta); font-weight: 600;
}
.vk-muisti { margin: 0 0 8px; }
.vk-askeleet { margin: 0 0 20px; padding-left: 1.4em; }
.vk-askeleet li { margin-bottom: 8px; padding-left: 4px; }
.vk-askeleet li::marker { font-weight: 780; color: var(--p-himmea); }
.vk-valikko { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--p-viiva); }
.vk-valikko-rivi {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px;
  padding: 8px 4px; border: 0; border-bottom: 1px solid var(--p-viiva); background: none;
  color: var(--p-teksti); font: var(--t-leipa); font-weight: 600; text-align: left; text-decoration: none;
}
.vk .vk-valikko-rivi .ic { color: var(--p-himmea); }
.vk-valikko-rivi > span { color: var(--p-himmea); font-weight: 500; }
.vk-ilmoitus {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: calc(var(--p-z-lehti) + 10);
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 32px); min-height: 56px;
  padding: 4px 4px 4px 18px; border: 1px solid var(--p-raja); border-radius: var(--p-r-pilleri);
  background: var(--p-pinta-2); color: var(--p-teksti); font: var(--t-pieni); font-weight: 600; transform: translateX(-50%);
}
.vk-ilmoitus[hidden] { display: none; }
.vk-ilmoitus .vk-linkki { min-height: 48px; padding: 0 14px; font: var(--t-pieni); font-weight: 700; }
/* Nimiruudulla ilmoitus nousee tahmean aloituspalkin yläpuolelle, ettei se peitä aloitusnappia. */
.vk-ilmoitus--nimet { bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ---------- liike: neljä tunnushetkeä ---------- */
@keyframes vk-ilmesty { from { opacity: 0; } to { opacity: 1; } }
@keyframes vk-nousee { from { transform: translateY(28px); } to { transform: none; } }
@keyframes vk-pinoon { from { transform: translateY(-8px); } to { transform: none; } }
@keyframes vk-leima {
  from { transform: translate(calc(var(--p-siirto) * -1), calc(var(--p-siirto) * -1)) scale(1.03); box-shadow: 0 0 0 0 var(--p-korostus); }
  to { transform: none; box-shadow: var(--p-siirto) var(--p-siirto) 0 0 var(--p-korostus); }
}
.vk-leima { animation: vk-leima var(--p-hidas) var(--p-ease) both; }
.vk-vt-pakka { view-transition-name: pakka; }
::view-transition-group(pakka) { animation-duration: 260ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }

@media (prefers-reduced-motion: reduce) {
  :root { --p-nopea: 1ms; --p-hidas: 1ms; }
  .vk, .vk *, .vk *::before, .vk *::after { animation: none !important; transition: none !important; }
  .vk-pisteet--lepo i { transform: translateY(0); }
  .vk-pisteet--lepo i + i { transform: translateY(calc(var(--vk-piste) / -2)); }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- leveä ruutu ---------- */
@media (min-width: 720px) {
  .vk-lehti { left: 50%; right: auto; top: 50%; bottom: auto; width: 460px; max-height: 88vh; padding-bottom: 24px; border-radius: var(--p-r-sheet); transform: translate(-50%, -50%); animation: vk-ilmesty 160ms var(--p-ease); }
  .vk-lehti-kahva { display: none; }
}
@media (min-width: 960px) {
  .vk-ruutu--pakat { max-width: 1120px; padding-inline: 40px; }
  .vk-pakat-asettelu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  /* Palstat alkavat samalta korkeudelta: ensimmäisen väliotsikon yläreunus pois. */
  .vk-pakat-asettelu > * > :first-child { margin-top: 0; }
  .vk-ruutu--pakat .vk-otsikko { font-size: 40px; }
  .vk-ruutu--pakat .vk-juliste { min-height: 420px; padding: 24px 28px 28px; }
  .vk-ruutu--pakat .vk-juliste-nimi { font-size: 88px; }
  .vk-ruutu--pakat .vk-juliste-merkki { margin-bottom: 96px; }
  .vk-ruutu--nimet { max-width: 560px; }
}

/* ---------- 18+ ennen skriptejä ----------
   index.html lisää html-elementille luokan ika-uusi, jos laitteella ei ole 18+-merkkiä.
   Staattinen 18+-ruutu näkyy heti eikä odota skriptien latausta. Kun JS vaihtaa
   ruutua, inline display:none voittaa tämän säännön. */
.ika-uusi #disclaimer-screen { display: flex; opacity: 1; }

/* ---------- kopioitava paperi ----------
   styles.css estää tekstin valinnan koko sivulta. Osoite ja koodi, joita näytetään
   toiselle, pitää voida valita ja kopioida pitkällä painalluksella. */
.vk-paperilappu--osoite, .vk-paperilappu--koodi, .vk-mono { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* ---------- jakokuva lehdessä (profile-card.js, kun Web Sharea ei ole) ---------- */
.vk-jako-kuva {
  display: block; width: min(220px, 60%); height: auto; aspect-ratio: 9 / 16; margin: 4px auto 6px;
  border: 1px solid var(--p-raja); border-radius: 14px; -webkit-touch-callout: default;
}

/* ---------- tilihubi (#account-modal) ----------
   Hubin sisältö elää yhä vanhassa rakenteessaan (account.js), mutta se on yhden
   napautuksen päässä oman tilin lehdestä. Kunnes hubi saa oman passinsa, sen materiaali
   painetaan valikkojen säännöillä: ei liukuja, sumennettuja varjoja, versaalia eikä monoa
   koristeena, teksti vähintään 14 px ja 4,5:1, kohteet vähintään 48 px (DESIGN.md 5.8). */
#account-modal .btn { text-transform: none; letter-spacing: -.01em; font-family: var(--p-fontti); font-size: 16px; font-weight: 700; border-radius: var(--p-r-pilleri); box-shadow: none; }
#account-modal .btn:hover, #account-modal .btn:focus { transform: none; box-shadow: none; }
#account-modal .btn-primary, #account-modal .btn-primary:hover { background: var(--p-korostus); color: var(--p-korostus-muste); }
#account-modal .btn-secondary, #account-modal .btn-secondary:hover { background: transparent; color: var(--p-teksti); border: 2px solid var(--p-raja); }
#account-modal .acc-premium-btns .btn { white-space: nowrap; }
#account-modal .modal-close { width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
#account-modal .acc-empty { color: var(--p-himmea); font-size: 14px; opacity: 1; }
#account-modal .btn-sm { min-height: 48px; font-size: 14px !important; }
#account-modal .btn-danger, #account-modal .btn-danger:hover { background: transparent !important; color: var(--p-virhe) !important; border: 2px solid var(--p-virhe) !important; }
#account-modal .acc-input { min-height: 48px; border-color: var(--p-raja); background: var(--p-pohja); color: var(--p-teksti); }
/* Pelihistoria ja illan tiedot: pieni ja haalea teksti himmeäksi (5,8:1) vähintään 14 px:iin. */
#account-modal :is(.acc-history-players, .acc-history-names, .acc-history-meta, .acc-detail-code, .acc-round-target) {
  color: var(--p-himmea); font-size: 14px; opacity: 1;
}
#account-modal .acc-detail-round { font-size: 14px; opacity: 1; }
#account-modal :is(.acc-back-btn, .acc-page-btn, .acc-history-resume) {
  min-height: 48px; font-size: 14px;
}
/* Sivunumerot 48 px leveiksi myös (korjaus 15.9.2026), ja rivin näppäimistökohdistus näkyy. */
#account-modal .acc-page-btn { min-width: 48px; }
#account-modal .acc-history-row:focus-visible { outline: 2px solid var(--p-korostus); outline-offset: 2px; }
/* Pelihistorian rivi (yksityisyys v2, 15.9.2026). Kapealla ruudulla pakan nimi ja tila eivät
   mene päällekkäin: tila, päivä ja Jatka peliä rivittyvät nimien alle. Tila on sanana
   (Valmis, Kesken) paperilla eikä värinä, ja Jatka peliä on reunanappi. */
#account-modal .acc-history-row { flex-wrap: wrap; row-gap: 8px; background: var(--p-pinta-2); }
#account-modal .acc-history-main { flex: 1 1 14rem; flex-wrap: wrap; column-gap: 10px; row-gap: 2px; }
#account-modal .acc-history-names { flex-basis: 100%; }
#account-modal .acc-history-meta { flex-wrap: wrap; row-gap: 6px; }
#account-modal .acc-history-cat { color: var(--p-teksti); font-size: 16px; }
#account-modal .acc-history-status { color: var(--p-teksti); font-weight: 600; }
#account-modal .acc-history-resume { background: transparent; color: var(--p-teksti); border: 2px solid var(--p-raja); border-radius: var(--p-r-pilleri); padding: 0 16px; }
#account-modal .acc-history-resume:hover { background: var(--p-pinta); border-color: var(--p-teksti); }