/*
 * Projektisivun (projekti.html) tyyli: linssi- ja pelikatalogin
 * pergamenttityyli yhdessä tiedostossa. Linssiosion komponentit on
 * rajattu .lk-luokan alle ja peliosion .pk-luokan alle, koska
 * katalogeilla on samannimisiä mutta eri näköisiä luokkia (.kortti,
 * .sk-kortti, .ruudukko).
 */
:root {
  --paperi: #efe6d2;
  --paperi-tumma: #e3d7bc;
  --paperi-kortti: #f6efe0;
  --muste: #2b241b;
  --muste-haalea: #6b5f4d;
  --seepia: #8a5a2b;
  --sininen: #3f5a7a;
  --kulta: #b8892f;
  --vihrea: #5f6b4a;
  --terrakotta: #a0522d;
  --turkoosi: #3f7a72;
  --violetti: #6a4f8a;
  --ruusu: #a14b6e;
  --hiekka: #7a6a4a;
  --harmaasininen: #5c6b78;
  --viiva: #c9bb9c;
  --varjo: rgba(43, 36, 27, .14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paperi: #1f1a14;
    --paperi-tumma: #2a241b;
    --paperi-kortti: #2a241a;
    --muste: #ebe0c8;
    --muste-haalea: #a99d86;
    --seepia: #d2a06a;
    --sininen: #9fb6cf;
    --kulta: #d9b25a;
    --vihrea: #a4b087;
    --terrakotta: #d88a5c;
    --turkoosi: #8fc2b8;
    --violetti: #b39ddb;
    --ruusu: #d98cae;
    --hiekka: #c4b48a;
    --harmaasininen: #93a3ae;
    --viiva: #4a4034;
    --varjo: rgba(0, 0, 0, .35);
  }
}
:root[data-theme="dark"] {
  --paperi: #1f1a14;
  --paperi-tumma: #2a241b;
  --paperi-kortti: #2a241a;
  --muste: #ebe0c8;
  --muste-haalea: #a99d86;
  --seepia: #d2a06a;
  --sininen: #9fb6cf;
  --kulta: #d9b25a;
  --vihrea: #a4b087;
  --terrakotta: #d88a5c;
  --turkoosi: #8fc2b8;
  --violetti: #b39ddb;
  --ruusu: #d98cae;
  --hiekka: #c4b48a;
  --harmaasininen: #93a3ae;
  --viiva: #4a4034;
  --varjo: rgba(0, 0, 0, .35);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paperi);
  color: var(--muste);
  font-family: Vollkorn, Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
}
img { max-width: 100%; }
.mono { font-family: "Special Elite", "Courier New", monospace; }
.sivu { max-width: 1180px; margin: 0 auto; padding: 40px 24px 80px; }
a { color: inherit; }

/* --- Otsake --- */
header.otsake { display: grid; gap: 10px; padding-bottom: 22px; margin-bottom: 0; }
.yla { font-family: "Special Elite", monospace; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--seepia); }
h1 { font-size: clamp(34px, 6vw, 58px); line-height: 1.02; margin: 0; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.johdanto { max-width: 62ch; font-size: 18px; color: var(--muste-haalea); margin: 2px 0 6px; }
.luvut { display: flex; flex-wrap: wrap; gap: 22px 30px; margin: 0 0 30px; }
.luvut div { font-family: "Special Elite", monospace; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muste-haalea); }
.luvut b { display: block; font-family: Vollkorn, serif; font-size: 30px; font-weight: 700; letter-spacing: 0; color: var(--muste); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.luvut .erittely { display: block; font-family: Vollkorn, serif; text-transform: none; letter-spacing: 0; font-size: 12.5px; font-style: italic; color: var(--muste-haalea); margin-top: 3px; }
.osio-johdanto { max-width: 70ch; font-size: 17px; color: var(--muste-haalea); margin: 0 0 18px; }

h2.otsikko { font-size: 15px; margin: 0 0 16px; font-family: "Special Elite", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--seepia); display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; }
h2.otsikko .selite { font-family: Vollkorn, serif; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--muste-haalea); font-style: italic; }
section.lohko { margin: 46px 0; }
section.lohko:first-child { margin-top: 0; }

/* --- Päävälilehdet --- */
.paavalilehdet { display: flex; gap: 26px; border-bottom: 2px solid var(--muste); margin: 0 0 34px; }
.paa-nappi {
  font: 14px "Special Elite", monospace; letter-spacing: .07em; text-transform: uppercase;
  background: transparent; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px;
  padding: 12px 2px; cursor: pointer; color: var(--muste-haalea); white-space: nowrap; text-decoration: none;
}
.paa-nappi:hover { color: var(--muste); }
.paa-nappi[aria-selected="true"] { color: var(--muste); border-bottom-color: var(--seepia); }
.paa-nappi:focus-visible { outline: 2px solid var(--kulta); outline-offset: 2px; }
.paa-nappi .lyhyt { display: none; }
.paaosio[hidden] { display: none; }
@media (max-width: 860px) {
  .paavalilehdet { gap: 16px; }
  .paa-nappi { font-size: 12.5px; }
  .paa-nappi .pitka { display: none; }
  .paa-nappi .lyhyt { display: inline; }
}
@media (max-width: 560px) {
  /* Puhelimella esittely vain Tilanne-välilehdellä: katalogit alkavat ylempää. */
  body:not([data-paa="tilanne"]) .otsake .johdanto { display: none; }
  .paavalilehdet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-bottom: none; }
  .paa-nappi { border: 1px solid var(--viiva); margin: 0 -1px -1px 0; padding: 10px 4px; font-size: 12px; text-align: center; background: var(--paperi-kortti); }
  .paa-nappi[aria-selected="true"] { background: var(--muste); color: var(--paperi); border-color: var(--muste); }
}

/* --- Alavälilehdet (linssit ja pelit) --- */
.valilehdet { display: flex; gap: 22px; border-bottom: 1px solid var(--viiva); margin: 0 0 32px; flex-wrap: wrap; row-gap: 0; }
.valilehti-nappi {
  font: 13px "Special Elite", monospace; letter-spacing: .06em; text-transform: uppercase;
  background: transparent; border: none; border-bottom: 3px solid transparent; margin-bottom: -1px;
  padding: 10px 2px; cursor: pointer; color: var(--muste-haalea); white-space: nowrap;
}
.valilehti-nappi:hover { color: var(--muste); }
.valilehti-nappi[aria-selected="true"] { color: var(--muste); border-bottom-color: var(--seepia); }
.valilehti-nappi:focus-visible { outline: 2px solid var(--kulta); outline-offset: 2px; }
.valilehti-nappi .lyhyt { display: none; }
.valilehti[hidden] { display: none; }
@media (max-width: 480px) {
  .valilehdet { gap: 0 14px; }
  .valilehti-nappi { font-size: 11.5px; padding: 8px 0; }
  .valilehti-nappi .pitka { display: none; }
  .valilehti-nappi .lyhyt { display: inline; }
}

/* --- Suodattimet (yhteinen runko) --- */
nav.suodatin { position: sticky; top: 0; z-index: 5; background: var(--paperi); border-bottom: 1px solid var(--viiva); padding: 12px 0; margin-bottom: 28px; display: grid; gap: 10px; }
.suodatin-rivi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.suodatin-rivi .otsikkopieni { font: 11px "Special Elite", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muste-haalea); margin-right: 4px; min-width: 62px; }
nav.suodatin button.lippu { font: 12.5px "Special Elite", monospace; letter-spacing: .05em; color: var(--muste); background: transparent; border: 1px solid var(--viiva); border-radius: 999px; padding: 5px 11px; cursor: pointer; }
nav.suodatin button.lippu[aria-pressed="true"] { background: var(--muste); color: var(--paperi); border-color: var(--muste); }
nav.suodatin button.lippu:focus-visible { outline: 2px solid var(--kulta); outline-offset: 2px; }
.haku { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.haku input[type="search"], .haku select { font: 14px Vollkorn, serif; background: var(--paperi-kortti); border: 1px solid var(--viiva); border-radius: 999px; padding: 7px 14px; color: var(--muste); max-width: 100%; }
.haku input[type="search"] { min-width: 260px; }
.osuma-maara { font: 12.5px "Special Elite", monospace; color: var(--muste-haalea); margin-left: auto; white-space: nowrap; }
.tyhja { font-style: italic; color: var(--muste-haalea); }

/* --- Alatunniste ja napit --- */
.alanapit { display: flex; gap: 10px; flex-wrap: wrap; margin: 44px 0 18px; }
.alanapit button { font: 12.5px "Special Elite", monospace; letter-spacing: .06em; text-transform: uppercase; background: var(--paperi-kortti); border: 1px solid var(--viiva); border-radius: 999px; padding: 8px 16px; cursor: pointer; color: var(--muste); }
.osio-alatunniste { margin-top: 26px; font-family: "Special Elite", monospace; font-size: 12px; letter-spacing: .05em; color: var(--muste-haalea); line-height: 1.7; }
footer.sivun-alatunniste { margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--viiva); font-family: "Special Elite", monospace; font-size: 12px; letter-spacing: .05em; color: var(--muste-haalea); line-height: 1.7; }
.teemakytkin { position: fixed; top: 14px; right: 14px; z-index: 6; font: 12px "Special Elite", monospace; letter-spacing: .07em; text-transform: uppercase; color: var(--muste-haalea); background: var(--paperi-tumma); border: 1px solid var(--viiva); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.teemakytkin:focus-visible { outline: 2px solid var(--kulta); outline-offset: 2px; }
@media (max-width: 640px) { .teemakytkin { top: 8px; right: 8px; padding: 5px 10px; } }

@media (max-width: 480px) {
  body { font-size: 16px; }
  .sivu { padding: 44px 16px 60px; }
  .luvut { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
  .luvut b { font-size: 24px; }
  .haku input[type="search"] { min-width: 0; flex: 1 1 100%; }
  .suodatin-rivi .otsikkopieni { flex: 1 1 100%; }
  nav.suodatin { position: static; }
  .johdanto { font-size: 16.5px; }
}

/* ================================================================
 * TILANNE ja osa-aluevälilehdet (kartta, sisältö, natiivi)
 * ================================================================ */
.tila-merkki { display: inline-block; font: 10.5px "Special Elite", monospace; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--tilavari, var(--seepia)); color: var(--paperi); line-height: 1.1; }
.yleiskuva { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.yleiskuva p { margin: 0 0 12px; font-size: 18px; }
.yleiskuva figure { margin: 0; }
.kuva { margin: 0; }
.kuva img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--viiva); background: var(--paperi-tumma); }
.kuva figcaption { font-size: 13.5px; color: var(--muste-haalea); font-style: italic; margin-top: 6px; line-height: 1.4; }
.seuraavaksi { margin: 14px 0 0; }
.seuraavaksi h3, .osa-kortti h4 { font: 11.5px "Special Elite", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--seepia); margin: 0 0 6px; }
.seuraavaksi ul, .osa-kortti ul { margin: 0; padding-left: 1.2em; }
.seuraavaksi li, .osa-kortti li { margin: 2px 0; }

.luvutaulu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lukukortti { background: var(--paperi-kortti); border: 1px solid var(--viiva); border-radius: 10px; padding: 14px 16px; display: grid; gap: 2px; align-content: start; min-width: 0; }
.lukukortti .arvo { font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lukukortti .nimi { font: 11.5px "Special Elite", monospace; letter-spacing: .07em; text-transform: uppercase; color: var(--muste-haalea); }
.lukukortti .erittely { font-size: 13px; font-style: italic; color: var(--muste-haalea); line-height: 1.35; margin-top: 3px; }

.tilapalkit { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tilapalkki { background: var(--paperi-kortti); border: 1px solid var(--viiva); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.tilapalkki .ylarivi { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.tilapalkki b { font-size: 17px; }
.tilapalkki .yht { font: 12px "Special Elite", monospace; color: var(--muste-haalea); }
.palkki { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--paperi-tumma); }
.palkki span { display: block; height: 100%; background: var(--vari); }
.palkki span + span { border-left: 2px solid var(--paperi-kortti); }
.selitteet { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13.5px; }
.selitteet li { display: flex; align-items: center; gap: 6px; }
.selitteet i { width: 9px; height: 9px; border-radius: 50%; background: var(--vari); display: inline-block; }
.selitteet b { font-size: 13.5px; font-variant-numeric: tabular-nums; }

.osa-kortit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.osa-kortti { background: var(--paperi-kortti); border: 1px solid var(--viiva); border-radius: 10px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.osa-kortti .ok-kuva { aspect-ratio: 16 / 7; overflow: hidden; background: var(--paperi-tumma); border-bottom: 1px solid var(--viiva); }
.osa-kortti .ok-kuva img { width: 100%; height: 100%; object-fit: cover; display: block; }
.osa-kortti .ok-kuvio { display: flex; align-items: center; justify-content: center; gap: 9%; color: var(--terrakotta); background: repeating-linear-gradient(135deg, var(--paperi-tumma), var(--paperi-tumma) 10px, var(--paperi) 10px, var(--paperi) 20px); }
.osa-kortti .ok-kuvio span { width: 15%; max-width: 64px; aspect-ratio: 1; }
.osa-kortti .ok-kuvio svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
/* Pariton viimeinen kortti koko leveydelle, kuva vasemmalla. */
@media (min-width: 641px) {
  .osa-kortti:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .osa-kortti:last-child:nth-child(odd) .ok-kuva { aspect-ratio: auto; border-bottom: none; border-right: 1px solid var(--viiva); min-height: 100%; position: relative; min-height: 260px; }
  .osa-kortti:last-child:nth-child(odd) .ok-kuva img { position: absolute; inset: 0; }
}
.osa-kortti .ok-body { padding: 14px 16px 16px; display: grid; gap: 8px; align-content: start; }
.osa-kortti .ok-ylarivi { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 10px; }
.osa-kortti h3 { margin: 0; font-size: 21px; line-height: 1.2; }
.osa-kortti p { margin: 0; font-size: 15px; line-height: 1.5; }
.osa-kortti .ok-luvut { font: 12px "Special Elite", monospace; letter-spacing: .04em; color: var(--muste-haalea); }
.osa-linkki { font: 12px "Special Elite", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--sininen); text-decoration: none; justify-self: start; margin-top: 4px; }
.osa-linkki:hover { text-decoration: underline; }

.osa-sivu { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.osa-sivu .teksti p { margin: 0 0 12px; font-size: 18px; }
.kuvat { display: grid; gap: 16px; }
.kuvat.rinnakkain { grid-template-columns: 1fr 1fr; }

@media (max-width: 900px) {
  .luvutaulu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yleiskuva, .osa-sivu { grid-template-columns: 1fr; }
  .tilapalkit { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .osa-kortit { grid-template-columns: 1fr; }
  .yleiskuva p, .osa-sivu .teksti p { font-size: 16.5px; }
  .lukukortti { padding: 12px; }
  .lukukortti .arvo { font-size: 24px; }
}

/* ================================================================
 * LINSSIT (.lk) — linssikatalogin komponentit
 * ================================================================ */
.lk .moottorit { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.lk .moottori { background: var(--paperi-kortti); border: 1px solid var(--viiva); border-radius: 10px; padding: 16px; display: grid; gap: 8px; align-content: start; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.lk .moottori .ikoni { width: 30px; height: 30px; color: var(--vari, var(--seepia)); }
.lk .moottori .ikoni svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lk .moottori b { font-size: 15.5px; font-weight: 700; }
.lk .moottori p { margin: 0; font-size: 13.5px; color: var(--muste-haalea); line-height: 1.4; }
.lk .moottori p code { font-family: "Special Elite", monospace; font-size: 12px; background: var(--paperi-tumma); border: 1px solid var(--viiva); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.lk .moottori .badge { font: 10px "Special Elite", monospace; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; width: fit-content; align-self: flex-start; display: inline-block; line-height: 1; }
.lk .moottori .badge.rakennettu { background: var(--vihrea); color: var(--paperi); }
.lk .moottori .badge.suunnitteilla { background: var(--paperi-tumma); color: var(--muste-haalea); }

.lk .pelissa-nyt { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lk .pn-kortti { background: var(--paperi-kortti); border: 1px solid var(--viiva); border-radius: 10px; overflow: hidden; }
.lk .pn-kuva { aspect-ratio: 16/8; background: repeating-linear-gradient(135deg, var(--paperi-tumma), var(--paperi-tumma) 10px, var(--paperi) 10px, var(--paperi) 20px); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.lk .pn-kuva img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lk .pn-kuva .tagi { position: absolute; top: 10px; left: 10px; z-index: 1; font: 11px "Special Elite", monospace; letter-spacing: .08em; text-transform: uppercase; background: var(--muste); color: var(--paperi); padding: 4px 8px; border-radius: 999px; }
.lk .pn-kuva .merkki { font: 13px "Special Elite", monospace; color: var(--muste-haalea); letter-spacing: .06em; }
.lk .pn-teksti { padding: 14px 16px 16px; }
.lk .pn-teksti b { font-size: 19px; }
.lk .pn-teksti p { margin: 4px 0 0; font-size: 14px; color: var(--muste-haalea); }

.lk .seuraavat-ruudukko { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding: 4px 2px 14px; }
.lk .sk-kortti { background: var(--paperi-kortti); border: 1px solid var(--viiva); border-radius: 10px; padding: 10px; display: grid; gap: 6px; align-content: start; }
.lk .sk-numero { font: 12px "Special Elite", monospace; color: var(--seepia); }
.lk .sk-kuva { position: relative; aspect-ratio: 4/3; border-radius: 6px; background: var(--tausta, var(--paperi-tumma)); display: flex; align-items: center; justify-content: center; color: var(--vari, var(--muste-haalea)); overflow: hidden; }
.lk .sk-kuva svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lk .sk-kuva img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.lk .sk-nimi { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.lk .sk-kaari { font-size: 11.5px; color: var(--muste-haalea); font-variant-numeric: tabular-nums; }

.lk .aikasuodin { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; min-width: 0; }
.lk .aikasuodin .vuosi { font: 12px "Special Elite", monospace; color: var(--muste-haalea); white-space: nowrap; min-width: 64px; }
.lk .aikasuodin-rata { position: relative; flex: 1 1 auto; height: 20px; min-width: 80px; }
.lk .aikasuodin-rata::before { content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 2px; border-radius: 2px; background: var(--viiva); }
.lk .aikasuodin-rata .aktiivi { position: absolute; top: 9px; height: 2px; border-radius: 2px; background: var(--seepia); }
.lk .aikasuodin-rata input[type="range"] { position: absolute; left: 0; top: 0; width: 100%; margin: 0; height: 20px; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; }
.lk .aikasuodin-rata input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.lk .aikasuodin-rata input[type="range"]::-moz-range-track { background: transparent; }
.lk .aikasuodin-rata input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--seepia); cursor: pointer; margin-top: 3px; }
.lk .aikasuodin-rata input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--seepia); border: none; cursor: pointer; }

.lk .ruudukko { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lk .kortti { background: var(--paperi-kortti); border: 1px solid var(--viiva); border-radius: 10px; overflow: hidden; cursor: pointer; min-width: 0; }
.lk .kortti:hover { box-shadow: 0 3px 14px var(--varjo); }
.lk .kortti[hidden] { display: none; }
.lk .kortti.auki { grid-column: 1 / -1; cursor: default; }
.lk .k-kuva { aspect-ratio: 4/3; position: relative; background: var(--tausta, var(--paperi-tumma)); display: flex; align-items: center; justify-content: center; color: var(--vari, var(--muste-haalea)); }
.lk .kortti.auki .k-kuva { aspect-ratio: 21/9; }
.lk .k-kuva svg { width: 34%; max-width: 64px; height: auto; fill: none; stroke: currentColor; stroke-width: 1.3; opacity: .55; }
.lk .k-cc { position: absolute; bottom: 6px; right: 6px; width: 30px; height: 22px; border-radius: 3px; background: var(--paperi); border: 1px solid var(--viiva); object-fit: cover; }
.lk .k-kuva-pieni { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lk .k-lahde { margin: 2px 0 0; font-size: 12px; color: var(--muste-haalea); }
.lk .k-lahde a { color: var(--sininen); }
.lk .k-tila-piste { position: absolute; top: 8px; left: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--tilavari); box-shadow: 0 0 0 2px var(--paperi-kortti); z-index: 2; }
.lk .k-body { padding: 12px 14px 14px; display: grid; gap: 6px; }
.lk .k-ylarivi { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lk .k-tunnus { font: 11.5px "Special Elite", monospace; color: var(--seepia); }
.lk .k-nimi { font-size: 17px; font-weight: 700; margin: 0; line-height: 1.25; }
.lk .k-meta { font-size: 12.5px; color: var(--muste-haalea); margin: 0; }
.lk .k-aikapalkki { position: relative; height: 7px; border-radius: 4px; background: var(--paperi-tumma); overflow: visible; margin: 3px 0 1px; }
.lk .k-aikapalkki .segmentti { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--vari, var(--seepia)); opacity: .8; }
.lk .k-aikapalkki .piste1873 { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #b3402f; }
.lk .k-aikapalkki .moodi { font-size: 11px; color: var(--muste-haalea); font-style: italic; }
.lk .k-pysakit { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 0; }
.lk .k-pysakit span { font-size: 11.5px; background: var(--paperi-tumma); border: 1px solid var(--viiva); border-radius: 999px; padding: 2px 8px; color: var(--muste); }
.lk .k-pysakit span.lisaa { color: var(--muste-haalea); background: transparent; padding-left: 2px; }
.lk .k-tila-teksti { font: 11px "Special Elite", monospace; text-transform: uppercase; letter-spacing: .06em; color: var(--tilavari); }
.lk .k-opitaan { font-size: 13px; font-style: italic; color: var(--muste-haalea); margin: 0; }
.lk .k-pelikytkos { position: absolute; top: 8px; right: 8px; font: 10.5px "Special Elite", monospace; letter-spacing: .05em; background: var(--muste); color: var(--paperi); padding: 3px 8px; border-radius: 999px; z-index: 2; max-width: 70%; }
.lk .k-tahdet { font-size: 12px; letter-spacing: 1px; color: var(--kulta); }
.lk .moottori-lohko { margin-bottom: 38px; }
.lk .moottori-lohko h3 { display: flex; align-items: center; gap: 8px; font-size: 20px; margin: 0 0 12px; }
.lk .moottori-lohko h3 .moottori-ikoni { width: 20px; height: 20px; color: var(--vari); }
.lk .moottori-lohko h3 .moottori-ikoni svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lk .moottori-lohko h3 .maara { font: 13px "Special Elite", monospace; color: var(--muste-haalea); font-weight: 400; }
.lk .k-lisatiedot { display: none; padding: 0 14px 18px; gap: 14px; }
.lk .kortti.auki .k-lisatiedot { display: grid; grid-template-columns: 1fr 1fr; }
.lk .kortti.auki .k-body { padding-bottom: 4px; }
.lk .k-lisatiedot .sarake { display: grid; gap: 10px; align-content: start; min-width: 0; }
.lk .k-lisatiedot h4 { margin: 0; font: 11px "Special Elite", monospace; text-transform: uppercase; letter-spacing: .07em; color: var(--muste-haalea); }
.lk .k-lisatiedot .huom-teksti { font-size: 14px; color: var(--sininen); margin: 0; }
.lk .k-lisatiedot .pysakit-koko { margin: 0; font-size: 15px; }
.lk .k-sulje { font: 11px "Special Elite", monospace; background: transparent; border: 1px solid var(--viiva); border-radius: 999px; padding: 4px 10px; cursor: pointer; color: var(--muste-haalea); justify-self: start; }

.lk .tiekartta { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.lk .tk-sarake { background: var(--paperi-tumma); border-radius: 10px; padding: 10px; min-width: 0; }
.lk .tk-otsikko { display: flex; align-items: center; gap: 8px; font: 11.5px "Special Elite", monospace; text-transform: uppercase; letter-spacing: .06em; padding: 4px 4px 10px; }
.lk .tk-piste { width: 9px; height: 9px; border-radius: 50%; background: var(--vari); flex: none; }
.lk .tk-maara { margin-left: auto; color: var(--muste-haalea); }
.lk .tk-kortti { background: var(--paperi-kortti); border: 1px solid var(--viiva); border-radius: 7px; padding: 7px 9px; margin-bottom: 6px; font-size: 12.5px; cursor: pointer; }
.lk .tk-kortti b { display: block; font-size: 13px; margin-bottom: 1px; }
.lk .tk-kortti span { color: var(--muste-haalea); font-size: 11px; }

@media (max-width: 900px) {
  .lk .moottorit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lk .pelissa-nyt { grid-template-columns: 1fr; }
  .lk .ruudukko { grid-template-columns: 1fr; }
  .lk .kortti.auki .k-lisatiedot { grid-template-columns: 1fr; }
  .lk .tiekartta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .lk .moottorit { grid-template-columns: 1fr; }
  .lk .tiekartta { grid-template-columns: 1fr; }
  .lk .seuraavat-ruudukko { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Esitystila (koko ruudun linssiesitys) */
#esitys { position: fixed; inset: 0; z-index: 20; background: var(--paperi); display: none; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px; text-align: center; }
body.esitys-paalla #esitys { display: flex; }
body.esitys-paalla > .sivu, body.esitys-paalla .teemakytkin { display: none; }
#esitys .e-kuva { position: relative; overflow: hidden; width: min(88vw, 640px); aspect-ratio: 4/3; border-radius: 14px; background: var(--tausta, var(--paperi-tumma)); color: var(--vari, var(--muste-haalea)); display: flex; align-items: center; justify-content: center; margin-bottom: 26px; }
#esitys .e-kuva svg { width: 90px; height: 90px; fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .6; }
#esitys .e-kuva img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
#esitys .e-nimi { font-size: clamp(26px, 4vw, 42px); font-weight: 700; margin: 0 0 8px; }
#esitys .e-kaari { font-family: "Special Elite", monospace; color: var(--muste-haalea); font-size: 15px; margin-bottom: 0; }
#esitys .e-opitaan { font-style: italic; color: var(--muste-haalea); font-size: 16px; max-width: 60ch; margin: 14px 0 0; }
#esitys .e-cc { display: flex; align-items: center; gap: 10px; margin: 18px 0 24px; font-size: 12px; color: var(--muste-haalea); }
#esitys .e-cc img { width: 46px; height: 34px; object-fit: cover; border-radius: 4px; border: 1px solid var(--viiva); }
#esitys .e-cc a { color: var(--sininen); }
#esitys .e-ohjaus { display: flex; align-items: center; gap: 18px; }
#esitys .e-ohjaus button { font: 13px "Special Elite", monospace; background: var(--paperi-kortti); border: 1px solid var(--viiva); border-radius: 999px; padding: 8px 18px; cursor: pointer; color: var(--muste); }
#esitys .e-laskuri { font: 12px "Special Elite", monospace; color: var(--muste-haalea); position: absolute; top: 20px; left: 50%; transform: translateX(-50%); }
#esitys .e-poistu { position: absolute; top: 20px; right: 24px; font: 12px "Special Elite", monospace; background: var(--paperi-kortti); border: 1px solid var(--viiva); border-radius: 999px; padding: 6px 14px; cursor: pointer; color: var(--muste); }

/* ================================================================
 * PELIT (.pk) — pelikatalogin komponentit
 * ================================================================ */
.pk .osat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pk .osa { background: var(--paperi-kortti); border: 1px solid var(--viiva); border-radius: 10px; padding: 16px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.pk .osa-nro { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--vari); color: var(--vari); display: flex; align-items: center; justify-content: center; font: 14px "Special Elite", monospace; }
.pk .osa b { font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.pk .osa p { margin: 0; font-size: 13.5px; color: var(--muste-haalea); line-height: 1.4; }
.pk .osa .badge { font: 10px "Special Elite", monospace; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; width: fit-content; line-height: 1; background: var(--paperi-tumma); color: var(--muste-haalea); }
.pk .osa details { font-size: 13px; color: var(--muste-haalea); }
.pk .osa summary { font: 11px "Special Elite", monospace; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.pk .osa details p { margin-top: 6px; font-size: 13px; }
.pk .osa-nappi { font: 11px "Special Elite", monospace; letter-spacing: .05em; background: transparent; border: 1px solid var(--viiva); border-radius: 999px; padding: 5px 11px; cursor: pointer; color: var(--muste); justify-self: start; margin-top: 2px; }
.pk .osa-nappi:focus-visible { outline: 2px solid var(--kulta); outline-offset: 2px; }
.pk .selite-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pk .selite-lista div { background: var(--paperi-kortti); border: 1px solid var(--viiva); border-radius: 10px; padding: 14px 16px; }
.pk .selite-lista p { margin: 6px 0 0; font-size: 14px; color: var(--muste-haalea); }

.pk .seuraavat-ruudukko { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; padding: 4px 2px 14px; }
.pk .sk-kortti { background: var(--paperi-kortti); border: 1px solid var(--viiva); border-radius: 10px; padding: 12px; display: grid; gap: 6px; align-content: start; cursor: pointer; transition: box-shadow .15s; }
.pk .sk-kortti:hover { box-shadow: 0 3px 14px var(--varjo); }
.pk .sk-ylarivi { display: flex; align-items: center; justify-content: space-between; }
.pk .sk-numero { font: 12px "Special Elite", monospace; color: var(--seepia); }
.pk .sk-ikoni { width: 26px; height: 26px; color: var(--vari, var(--muste-haalea)); }
.pk .sk-ikoni svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pk .sk-nimi { font-size: 16px; font-weight: 700; line-height: 1.25; }
.pk .sk-kaari { font: 11.5px "Special Elite", monospace; color: var(--muste-haalea); letter-spacing: .03em; }
.pk .sk-perustelu { font-size: 13px; color: var(--muste-haalea); margin: 0; line-height: 1.4; }

.pk .suodatin-rivi > div { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 1 auto; min-width: 0; }
.pk .osasuodatin { flex: 1 1 0; }
.pk .osa-lohko { margin-bottom: 38px; }
.pk .osa-lohko[hidden] { display: none; }
.pk .osa-lohko h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; margin: 0 0 12px; }
.pk .osa-lohko h3 .osa-nro { width: 26px; height: 26px; font-size: 12.5px; flex: none; }
.pk .osa-lohko h3 .maara { font: 13px "Special Elite", monospace; color: var(--muste-haalea); font-weight: 400; }
.pk .ruudukko { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pk .kortti { background: var(--paperi-kortti); border: 1px solid var(--viiva); border-radius: 10px; overflow: hidden; transition: box-shadow .15s; scroll-margin-top: 190px; min-width: 0; }
.pk .kortti:hover { box-shadow: 0 3px 14px var(--varjo); }
.pk .kortti[hidden] { display: none; }
.pk .kortti.korostus { box-shadow: 0 0 0 2px var(--kulta), 0 3px 14px var(--varjo); }
.pk .k-nauha { height: 6px; background: var(--vari, var(--seepia)); opacity: .85; }
.pk .k-body { padding: 12px 14px 14px; display: grid; gap: 6px; }
.pk .k-ylarivi { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pk .k-tunnus { font: 11.5px "Special Elite", monospace; color: var(--seepia); }
.pk .k-oikeus { font: 10px "Special Elite", monospace; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; line-height: 1; white-space: nowrap; }
.pk .k-oikeus.suora { background: var(--vihrea); color: var(--paperi); }
.pk .k-oikeus.oma { background: var(--terrakotta); color: var(--paperi); }
.pk .k-nimi { font-size: 17px; font-weight: 700; margin: 0; line-height: 1.25; }
.pk .k-meta { font-size: 12.5px; color: var(--muste-haalea); margin: -3px 0 0; }
.pk .k-saanto { font-size: 14px; margin: 2px 0 0; line-height: 1.45; }
.pk .k-opitaan { font-size: 13px; font-style: italic; color: var(--muste-haalea); margin: 0; }
.pk .k-tiedot { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 4px 0 0; font-size: 12.5px; line-height: 1.4; }
.pk .k-tiedot dt { font: 10.5px "Special Elite", monospace; text-transform: uppercase; letter-spacing: .06em; color: var(--muste-haalea); padding-top: 2px; white-space: nowrap; }
.pk .k-tiedot dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pk .k-tiedot dd a { color: var(--sininen); }
.pk .k-alarivi { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.pk .k-tila-teksti { font: 11px "Special Elite", monospace; text-transform: uppercase; letter-spacing: .06em; color: var(--tilavari); }
.pk .k-top { font: 10.5px "Special Elite", monospace; letter-spacing: .05em; background: var(--muste); color: var(--paperi); padding: 3px 8px; border-radius: 999px; }

.pk .suunnitelmat { display: grid; gap: 12px; }
.pk .suunnitelma { background: var(--paperi-kortti); border: 1px solid var(--viiva); border-left: 4px solid var(--vari, var(--seepia)); border-radius: 10px; min-width: 0; }
.pk .suunnitelma > summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.pk .suunnitelma > summary::-webkit-details-marker { display: none; }
.pk .suunnitelma > summary::after { content: '+'; margin-left: auto; font: 18px "Special Elite", monospace; color: var(--muste-haalea); }
.pk .suunnitelma[open] > summary::after { content: '−'; }
.pk .suunnitelma-nro { font: 12px "Special Elite", monospace; color: var(--muste-haalea); }
.pk .suunnitelma-nimi { font-family: Vollkorn, serif; font-size: 19px; font-weight: 700; }
.pk .suunnitelma-id { font: 11px "Special Elite", monospace; letter-spacing: .05em; color: var(--muste-haalea); }
.pk .suunnitelma-tila { font: 10.5px "Special Elite", monospace; letter-spacing: .05em; text-transform: uppercase; background: var(--terrakotta); color: var(--paperi); padding: 3px 8px; border-radius: 999px; }
.pk .suunnitelma-tiivis { flex: 1 1 100%; margin: 0; font-size: 14px; color: var(--muste-haalea); }
.pk .suunnitelma[open] .suunnitelma-tiivis { display: none; }
.pk .suunnitelma dl { margin: 0; padding: 0 16px 16px; display: grid; gap: 10px; }
.pk .suunnitelma dt { font: 11.5px "Special Elite", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--seepia); }
.pk .suunnitelma dd { margin: 2px 0 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }

.pk .ideat { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pk .idea { background: var(--paperi-kortti); border: 1px solid var(--viiva); border-radius: 10px; padding: 16px; display: grid; gap: 6px; align-content: start; }
.pk .idea b { font-size: 17px; }
.pk .idea p { margin: 0; font-size: 14px; color: var(--muste-haalea); }

@media (max-width: 900px) {
  .pk .osat { grid-template-columns: 1fr 1fr; }
  .pk .ruudukko { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .pk .osat, .pk .ruudukko, .pk .selite-lista { grid-template-columns: 1fr; }
  .pk .ideat { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .pk .kortti { scroll-margin-top: 16px; }
}

/* --- Tulostus: vain avoin pääosio, katalogit kokonaan --- */
@media print {
  :root, :root[data-theme] { --paperi: #fff; --paperi-tumma: #f0ede4; --paperi-kortti: #fff; --muste: #111; --muste-haalea: #555; --viiva: #ccc; }
  body { font-size: 11px; }
  .teemakytkin, .paavalilehdet, .valilehdet, nav.suodatin, .alanapit, #esitys { display: none !important; }
  .lk .valilehti[hidden], .pk .valilehti[hidden] { display: block !important; }
  .lk .seuraavat-ruudukko, .lk .moottorit, .lk .pelissa-nyt, .lk .tiekartta, .lk .k-lisatiedot, .lk .k-kuva { display: none !important; }
  .pk [data-ala-paneeli="osat"], .pk [data-ala-paneeli="ensimmaiset"], .pk [data-ala-paneeli="ideat"], .pk [data-ala-paneeli="suunnitelmat"] { display: none !important; }
  .lk [data-ala-paneeli="moottorit"], .lk [data-ala-paneeli="pelissa"], .lk [data-ala-paneeli="seuraavat"] { display: none !important; }
  .lk .ruudukko { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .pk .ruudukko { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .kortti { break-inside: avoid; border: 1px solid #ccc; }
  .sivu { max-width: none; padding: 0; }
  @page { size: A4 landscape; margin: 10mm; }
}