/* ============================================================
   KIPPIS LAVA: PELAAJAN PUHELIN
   Puhelin on tyhmä, iso ja yksinkertainen, jotta katseet pysyvät pöydässä.
   Koko ruudun väri kertoo tilan yhdellä vilkaisulla:
     tumma      katso isoa ruutua
     pinkki     sinun vuorosi, napauta nyt tai sait jakaa
     joukkue    joukkuepeli käynnissä, ruutu on oman joukkueen värinen
     neutraali  olet tauolla
   Pinkin ja joukkuevärin päällä teksti on aina tummaa mustetta.

   Tokenit ja yhteiset komponentit (ly-*) tulevat peli/lava-yhteinen.css:stä,
   joka ladataan ennen tätä. Tämä tiedosto hoitaa vain puhelimen rungon ja
   lp-*-luokat. Lisäosien vanhat lp-luokat saavat saman ilmeen tokeneista;
   jos elementillä on myös ly-vastine, ly-tyyli voittaa (:not(.ly-*)).
   Painettu, ei valaistu: ei liukuja, hehkua, sumennusta eikä pehmeää varjoa.
   Vanhat selaimet: jokaisella inset-, min()-, max()-, env()- ja dvh-arvolla
   on tavallinen varamääritys ennen itseään.
   ============================================================ */
:root {
    --oma: #4B9E7A;
    --joukkue: #E4412F;
    --mek: #FF2D6F;
    /* Vanhat nimet lisäosille, arvot yhteisistä tokeneista. */
    --lp-pohja: var(--ly-pohja, #131016);
    --lp-pinta: var(--ly-pinta, #1B1721);
    --lp-pinta2: var(--ly-pinta-2, #242029);
    --lp-viiva: var(--ly-viiva, #302A38);
    --lp-raja: var(--ly-raja, #786D7E);
    --lp-muste: var(--ly-teksti, #F4EFF3);
    --lp-himmea: var(--ly-himmea, #9C909F);
    --lp-pinkki: var(--ly-korostus, #FF2D6F);
    --lp-tumma-muste: var(--ly-muste, #131016);
    --lp-fontti: 'DM Sans VF', 'DM Sans', system-ui, -apple-system, sans-serif;
    --lp-nopea: var(--ly-nopea, 150ms);
    --lp-ease: var(--ly-ease, cubic-bezier(.2, .8, .2, 1));
    /* Ruudun väri. Tahmea ohjausrivi maalaa saman värin. */
    --lp-kentta: var(--lp-pohja);
}

* { box-sizing: border-box; }
html { overscroll-behavior: none; }
html, body { margin: 0; min-height: 100%; touch-action: manipulation; }
body {
    background: var(--lp-kentta);
    color: var(--lp-muste);
    color: var(--ly-fg, #F4EFF3);
    font-family: var(--lp-fontti);
    font-size: 17px;
    font-size: var(--ly-t-leipa, 17px);
    font-weight: 500;
    line-height: 1.4;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    transition: background-color var(--lp-nopea) var(--lp-ease);
}
body[data-vari="pinkki"] { --lp-kentta: var(--lp-pinkki); color: var(--lp-tumma-muste); }
/* Päivitetään-himmennys pinkillä kentällä (katselmoinnin jäämä, 15.9.2026): yhteinen 0,45 ja sen 150 ms:n siirtymä veivät
   Selvisitte-ruudun 17 px:n musteen alle 4,5:1:n (mitattu 3,63:1 eli tehollinen läpinäkyvyys 0,70). Pinkillä himmennys
   on 0,86, joten muste pysyy 4,6:1:ssä koko siirtymän ajan. Vanhan tilan kertovat yhä banneri ja se, ettei sisältö ota
   painalluksia (pointer-events tulee yhteisestä säännöstä). */
html[data-ly-yhteys="paivitetaan"] body[data-vari="pinkki"] [data-ly-himmenna] { opacity: .86; }
body[data-vari="joukkue"] { --lp-kentta: var(--joukkue); color: var(--lp-tumma-muste); }
body[data-vari="neutraali"] { --lp-kentta: var(--lp-pinta2); }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* Selaimen tavat pois pelistä (4.16). Syöte ja paperilappu pysyvät valittavina. */
body[data-ruutu="peli"] .lp-ruutu,
body[data-ruutu="lataa"] .lp-ruutu { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, .ly-paperilappu { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

.lp-nakymaton {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Oman värin palkki yläreunassa: kaveri näkee olkasi yli, kenen puhelin on kenen. */
.lp-omavari {
    position: fixed; top: 0; left: 0; right: 0;
    height: 6px;
    height: max(6px, env(safe-area-inset-top));
    background: var(--oma); z-index: 5;
}
body[data-ruutu="liity"] .lp-omavari,
body[data-ruutu="lataa"] .lp-omavari,
body[data-ruutu="ulkona"] .lp-omavari { background: var(--lp-pinkki); }

.lp-ruutu {
    display: none;
    flex-direction: column;
    gap: 18px;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 520px;
    margin: 0 auto;
    padding: 24px 18px 18px;
    padding: calc(max(6px, env(safe-area-inset-top)) + 18px) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}
body[data-ruutu="lataa"] [data-nakyma="lataa"],
body[data-ruutu="liity"] [data-nakyma="liity"],
body[data-ruutu="peli"] [data-nakyma="peli"],
body[data-ruutu="ulkona"] [data-nakyma="ulkona"] { display: flex; }

.lp-merkki { margin: 0; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.lp-merkki span { font-weight: 500; color: var(--lp-himmea); }
.lp-otsikko {
    margin: 0;
    font-size: 32px;
    font-size: var(--ly-t-otsikko, 32px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}
.lp-otsikko-iso { font-size: 44px; font-size: var(--ly-t-verbi, 44px); line-height: 0.98; font-weight: 1000; letter-spacing: -0.045em; }
.lp-teksti { margin: 0; font-size: 17px; font-size: var(--ly-t-leipa, 17px); line-height: 1.45; }
.lp-himmea { margin: 0; color: var(--lp-himmea); color: var(--ly-fg-2, #9C909F); }
.lp-alaviite { margin: 0; font-size: 14px; line-height: 1.45; color: var(--lp-himmea); color: var(--ly-fg-2, #9C909F); text-align: center; }
.lp-alaviite a { color: inherit; }
/* Paljastuksen ly-keskelle on yhteisen tyylin grid: tämä koskee vain ytimen ja vanhojen lisäosien lohkoja. */
.lp-keskelle:not(.ly-keskelle) { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.lp-virhe { margin: 0; min-height: 1.4em; color: var(--ly-virhe, #FF6B57); font-weight: 700; }
.ika-ok #lpIka { display: none; }

/* ---------- Latausruutu ---------- */
.lp-luuranko .lp-pallo { background: var(--lp-pinta2); }
.lp-luuranko .lp-valikkonappi { display: inline-flex; align-items: center; color: var(--lp-himmea); }
.lp-lataus-virhe { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; }

/* ---------- Liittyminen ---------- */
.lp-lomake { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.lp-liity-koodi { display: flex; align-items: flex-start; }
.lp-kentta { display: grid; gap: 6px; }
.lp-kentta span { font-weight: 700; font-size: 15px; color: var(--lp-himmea); }
.lp-kentta input {
    width: 100%;
    min-height: 60px;
    padding: 0 18px;
    border-radius: 16px;
    border: 2px solid var(--lp-raja);
    background: var(--lp-pinta);
    font-size: 22px;
    font-weight: 700;
}
.lp-kentta input::placeholder { color: var(--lp-himmea); opacity: 1; }
#lpKoodi { letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }

/* ---------- Napit ---------- */
/* Lisäosien vanha lp-iso on sama pilleri kuin ly-nappi--pinkki (DESIGN 5.2). */
.lp-iso:not(.ly-nappi) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    min-height: var(--ly-kohde, 56px);
    padding: 10px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--lp-pinkki);
    color: var(--lp-tumma-muste);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.15;
    text-decoration: none;
    text-align: center;
    touch-action: manipulation;
}
.lp-iso:not(.ly-nappi):disabled {
    cursor: default;
    background: transparent;
    color: inherit;
    border: 2px dashed var(--lp-raja);
    border: 2px dashed var(--ly-reuna, #786D7E);
}
.lp-toissijainen:not(.ly-nappi) { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px var(--lp-raja); box-shadow: inset 0 0 0 2px var(--ly-reuna, #786D7E); }
body[data-vari="pinkki"] .lp-iso:not(.ly-nappi):not(.lp-toissijainen):not(:disabled),
body[data-vari="joukkue"] .lp-iso:not(.ly-nappi):not(.lp-toissijainen):not(:disabled) { background: var(--lp-tumma-muste); color: var(--lp-muste); }
/* Päälle/pois-nappi (Pidä joukkueet): päällä paperi ja muste, ei pinkki. */
.lp-toissijainen[aria-pressed="true"], .lp-paalla-nappi[aria-pressed="true"] { background: var(--lp-muste); color: var(--lp-tumma-muste); box-shadow: none; }
body[data-vari="pinkki"] .lp-toissijainen[aria-pressed="true"],
body[data-vari="pinkki"] .lp-paalla-nappi[aria-pressed="true"] { background: var(--lp-tumma-muste); color: var(--lp-muste); }
.lp-napit-pino { display: grid; gap: 12px; }
.lp-napit-rivi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-pieni-nappi {
    min-height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: inherit;
    box-shadow: inset 0 0 0 2px var(--lp-raja);
    box-shadow: inset 0 0 0 2px var(--ly-reuna, #786D7E);
    font-weight: 800;
}

/* ---------- Pelinäkymä ---------- */
.lp-yla { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.lp-pallo { width: 16px; height: 16px; border-radius: 50%; background: var(--oma); flex: none; }
body[data-vari="pinkki"] .lp-pallo,
body[data-vari="joukkue"] .lp-pallo { box-shadow: inset 0 0 0 2px var(--lp-tumma-muste); }
.lp-nimet { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; flex: 1; }
.lp-oma-nimi { max-width: 100%; font-weight: 800; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Oma joukkue koko jakson ajan nimen alla. */
.lp-joukkue {
    display: inline-block;
    max-width: 100%;
    padding: 1px 10px;
    border-radius: 999px;
    background: var(--c, transparent);
    color: var(--lp-tumma-muste);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body[data-vari="joukkue"] .lp-joukkue,
body[data-vari="pinkki"] .lp-joukkue { box-shadow: inset 0 0 0 2px rgba(19, 16, 22, 0.45); }
.lp-valikkonappi {
    margin-left: auto;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: inherit;
    box-shadow: inset 0 0 0 2px var(--lp-raja);
    box-shadow: inset 0 0 0 2px var(--ly-reuna, #786D7E);
    font-weight: 800;
    flex: none;
}

/* Otsakkeen aikapalkki: sisäänrakennetut syöteaskeleet (4.9). */
.lp-aika { margin-top: -6px; }

/* Isännän tarttuva ohjausrivi peitti vastausnapit 360x640-ruudulla: sisältö varaa rivin korkeuden (--lp-ohjaus-h, nostaIlmoitus). */
.lp-sisalto { flex: 1; display: flex; flex-direction: column; gap: 16px; padding-bottom: 0; padding-bottom: var(--lp-ohjaus-h, 0px); }
.lp-sisalto > .lp-keskelle { min-height: 40vh; }
.lp-mek:not(.ly-mek) { margin: 0; font-weight: 800; font-size: 16px; }
.lp-kysymys {
    margin: 0;
    font-size: 22px;
    font-size: var(--ly-t-iso, 22px);
    line-height: 1.22;
    font-weight: 800;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}
.lp-panos:not(.ly-panos) { margin: 0; font-weight: 800; font-size: 18px; }
.lp-tila-rivi:not(.ly-rivi) { margin: 0; font-weight: 700; color: var(--lp-himmea); color: var(--ly-fg-2, #9C909F); text-align: center; }
/* Värikentällä täysi muste: 72 % muste jäi pinkillä 3,8:1:een (integraatio 15.9.2026). */
body[data-vari="pinkki"] .lp-tila-rivi:not(.ly-rivi), body[data-vari="joukkue"] .lp-tila-rivi:not(.ly-rivi) { color: var(--ly-fg); }
.lp-vahvistus { text-align: center; }

.lp-palkki:not(.ly-aikapalkki) { height: 6px; border-radius: 3px; background: var(--lp-viiva); background: var(--ly-rata, #302A38); overflow: hidden; }
.lp-palkki:not(.ly-aikapalkki) i { display: block; height: 100%; background: var(--lp-muste); background: var(--ly-tayte, #F4EFF3); transform-origin: left center; }

.lp-valinnat { display: grid; gap: 12px; }
.lp-valinnat.kaksi { grid-template-columns: 1fr 1fr; }
.lp-valinta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 12px 16px;
    border: 0;
    border-radius: 18px;
    background: var(--lp-pinta);
    box-shadow: inset 0 0 0 2px var(--lp-raja);
    color: var(--lp-muste);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
    overflow-wrap: anywhere;
    touch-action: manipulation;
}
.lp-valinta:disabled { cursor: default; }
.lp-valinta:disabled:not([aria-pressed="true"]) { opacity: 0.5; }
.lp-valinta[aria-pressed="true"] { background: var(--lp-muste); color: var(--lp-tumma-muste); box-shadow: none; }
.lp-valinta.keskita { justify-content: center; text-align: center; font-size: 22px; font-weight: 1000; }
/* Iso vaihtoehto kahdessa sarakkeessa: sana ei katkea kesken ("Tunnista n" 390 px:ssä), vaan koko ja sivutäyte antavat periksi. */
.lp-valinta.iso { min-height: 96px; padding-left: 10px; padding-right: 10px; font-size: 24px; overflow-wrap: break-word; word-break: normal; }
.lp-valinta .lp-vari { width: 18px; height: 18px; border-radius: 50%; background: var(--c); flex: none; }
.lp-valinta .ly-piste { flex: none; }
.lp-valinta .lp-kirjain {
    display: grid; place-items: center; flex: none;
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--c); color: var(--lp-tumma-muste); font-weight: 1000; font-size: 20px;
}
.lp-numerot {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 8px;
}
.lp-numerot .lp-valinta { min-height: 58px; justify-content: center; padding: 0; font-size: 22px; font-variant-numeric: tabular-nums; }

/* Kippis-kortti puhelimessa: kortin teksti ja panosrivi mekaniikan värisellä reunalla. */
.lp-kortti {
    display: grid;
    gap: 10px;
    padding: 18px 18px 18px 24px;
    border-radius: 22px;
    background: var(--lp-pinta);
    color: var(--lp-muste);
    box-shadow: inset 6px 0 0 var(--mek);
}
.lp-kortti .lp-panos { color: var(--lp-himmea); font-size: 16px; }

/* Pidä painettuna -kortti: sana näkyy vain peukalon ollessa ruudulla. */
.lp-salainen {
    display: grid;
    place-content: center;
    justify-items: center;
    min-height: 34vh;
    padding: 20px;
    border-radius: 24px;
    background: var(--lp-pinta);
    color: var(--lp-muste);
    box-shadow: inset 0 0 0 2px var(--lp-raja);
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
}
.lp-salainen b { display: block; font-size: 38px; line-height: 1.05; font-weight: 1000; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.lp-salainen small { display: block; margin-top: 8px; font-size: 16px; font-weight: 700; }
.lp-salainen.auki { background: var(--lp-muste); color: var(--lp-tumma-muste); box-shadow: none; }

.lp-tulos:not(.ly-tulos) { margin: 0; font-size: 36px; line-height: 1.05; font-weight: 1000; letter-spacing: -0.02em; overflow-wrap: anywhere; }
/* Omat huikat tästä askeleesta (yhteisen piirtäjän teksti). */
.lp-omat-juomat:not(.ly-omat-juomat) { margin: 0; font-size: 25px; line-height: 1.2; font-weight: 900; overflow-wrap: anywhere; }

/* ---------- Aula (4.21) ---------- */
.lp-aula { display: flex; flex-direction: column; gap: 14px; }
.lp-aula-nimi { align-self: flex-start; max-width: 100%; padding-bottom: 6px; border-bottom: 6px solid var(--oma); }
.lp-aula-koodi { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.lp-aula-tili { display: grid; gap: 10px; justify-items: start; margin-top: auto; }

/* ---------- Jakovalta ---------- */
.lp-jako { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.lp-jako-omat { display: grid; gap: 4px; }
.lp-jako-kohteet { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-jako-kohde {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-height: 88px;
    padding: 14px 14px 12px 20px;
    border: 0;
    border-radius: 20px;
    background: var(--lp-tumma-muste);
    color: var(--lp-muste);
    box-shadow: inset 6px 0 0 var(--c);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.15;
    text-align: left;
    overflow-wrap: anywhere;
    touch-action: manipulation;
}
.lp-jako-kohde:disabled { cursor: default; opacity: 0.35; }
/* Täynnä: tälle ei mahdu enempää tällä kierroksella. Harmaa, mutta jako ei jumitu. */
.lp-jako-kohde.taynna { opacity: 0.45; background: rgba(19, 16, 22, 0.55); }
.lp-jako-kohde.taynna:disabled { opacity: 0.3; }
/* Lähetys odottaa: nimet pysyvät täysin näkyvinä, vain rivi kertoo tilan (4.10). */
.lp-jako-kohteet[aria-busy="true"] .lp-jako-kohde,
.lp-jako-kohteet[aria-busy="true"] .lp-jako-kohde:disabled,
.lp-jako-kohteet[aria-busy="true"] .lp-jako-kohde.taynna { opacity: 1; }
.lp-jako-pisteet { display: flex; gap: 6px; min-height: 12px; }
.lp-jako-pisteet i { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.lp-jako-jaljella { margin: 0; font-size: 22px; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; }

/* Kippis yhtä aikaa: koko ruutu on nappi. */
.lp-napautus {
    flex: 1;
    display: grid;
    place-items: center;
    min-height: 52vh;
    border-radius: 28px;
    border: 0;
    background: transparent;
    color: inherit;
    box-shadow: inset 0 0 0 3px currentColor;
    font-size: 150px;
    font-size: min(38vw, 220px);
    font-weight: 1000;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    touch-action: manipulation;
}
.lp-napautus .ly-luku { margin: 0; font-size: inherit; line-height: 1; letter-spacing: -0.045em; }

.lp-jarjestys { margin: 0; }

/* Jakson palkinnot omalle puhelimelle. */
.lp-palkinnot { display: grid; gap: 10px; }
.lp-palkinto { margin: 0; display: grid; gap: 2px; padding: 14px 18px; border-radius: 18px; background: var(--lp-tumma-muste); color: var(--lp-muste); }
.lp-palkinto b { font-size: 22px; line-height: 1.15; font-weight: 900; overflow-wrap: anywhere; }
.lp-palkinto small { color: var(--lp-himmea); font-size: 16px; font-weight: 700; }

/* Ohjausnapit: kaksi isoa nappia ruudun alareunassa, isäntä jatkaa sohvalta (4.7). */
.lp-ohjaus {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 -18px;
    padding: 10px 18px;
    padding-bottom: 10px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    background: var(--lp-kentta);
    border-top: 1px solid var(--lp-viiva);
    border-top: 1px solid var(--ly-rata, #302A38);
    transition: background-color var(--lp-nopea) var(--lp-ease);
}
.lp-ohjaus .ly-nappi { width: 100%; min-height: 56px; min-height: var(--ly-kohde, 56px); padding-left: 8px; padding-right: 8px; white-space: nowrap; }
/* Matala ruutu: rivi tulee sisällön perään eikä kellu vastausten päällä. Jatka ja Tauko eivät ole peukalon kohdalla
   vastausnappien alla, vaan 24 px:n päässä niistä (katselmointi 15.9.2026). */
@media (max-height: 700px) {
    .lp-ohjaus { position: static; margin-top: 24px; }
    .lp-sisalto { padding-bottom: 0; }
}
/* Yhteysbanneri otsakkeen alle: 360 px:llä kaksirivinen banneri peitti oman nimen ja Valikko-napin koko katkon ajan (katselmointi 15.9.2026). */
.ly-yhteys { top: 80px; top: calc(80px + env(safe-area-inset-top, 0px)); }
/* Näppäimistö auki: lomake alkaa ylhäältä, jolloin Liity ja sen yllä oleva 18+-rivi pysyvät näkyvissä. */
@media (max-height: 460px) {
    .lp-lomake { justify-content: flex-start; gap: 10px; }
    .lp-kentta { gap: 4px; }
}

/* ---------- Valikko: lehti (4.17) ---------- */
.lp-valikko { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
.lp-valikko-otsikko { padding-right: 56px; }
.lp-valikko-otsikko:focus { outline: none; }
.lp-sulje {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
}
.lp-kytkin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
}
.lp-kytkin-teksti { display: grid; gap: 2px; }
.lp-kytkin-teksti b { font-weight: 800; }
.lp-kytkin-teksti small { color: var(--lp-himmea); font-size: 14px; line-height: 1.35; }
.lp-kytkin-rata {
    position: relative;
    flex: none;
    width: 52px;
    height: 32px;
    border-radius: 999px;
    background: var(--lp-pinta2);
    box-shadow: inset 0 0 0 2px var(--lp-raja);
    transition: background-color var(--lp-nopea) var(--lp-ease);
}
.lp-kytkin-rata i {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--lp-himmea);
    transition: transform var(--lp-nopea) var(--lp-ease);
}
/* Päällä paperi ja muste, ei pinkki: pinkki on toiminto (DESIGN 5.3). */
.lp-kytkin[aria-checked="true"] .lp-kytkin-rata { background: var(--lp-muste); box-shadow: none; }
.lp-kytkin[aria-checked="true"] .lp-kytkin-rata i { background: var(--lp-tumma-muste); transform: translateX(20px); }
.lp-valikko-tili { display: grid; gap: 10px; justify-items: start; }
.lp-valikko-isanta { display: grid; gap: 10px; }
.lp-valikko-valiotsikko { margin: 6px 0 0; font-size: 14px; font-weight: 800; color: var(--lp-himmea); }
.lp-valikko-ala { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 10px; }
.lp-valikko-ala a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }

/* ---------- Painallus (4.2): heti sisään, 150 ms ulos, :active varalla ---------- */
.lp-iso, .lp-valinta, .lp-jako-kohde, .lp-pieni-nappi, .lp-valikkonappi, .lp-napautus, .lp-salainen, .lp-kytkin, .lp-sulje {
    transition: transform var(--lp-nopea) var(--lp-ease), background-color var(--lp-nopea) var(--lp-ease);
}
.lp-iso:active, .lp-valinta:active, .lp-jako-kohde:active, .lp-pieni-nappi:active, .lp-valikkonappi:active, .lp-napautus:active, .lp-salainen:active, .lp-kytkin:active, .lp-sulje:active,
.lp-iso.ly-painettu, .lp-valinta.ly-painettu, .lp-jako-kohde.ly-painettu, .lp-pieni-nappi.ly-painettu, .lp-valikkonappi.ly-painettu,
.lp-napautus.ly-painettu, .lp-salainen.ly-painettu, .lp-kytkin.ly-painettu, .lp-sulje.ly-painettu {
    transform: scale(0.96);
    transition: none;
}
.lp-iso:not(.ly-nappi):not(.lp-toissijainen).ly-painettu { background: #E0245F; }
.lp-valinta.ly-painettu:not([aria-pressed="true"]),
.lp-pieni-nappi.ly-painettu, .lp-valikkonappi.ly-painettu, .lp-sulje.ly-painettu, .lp-toissijainen.ly-painettu:not([aria-pressed="true"]) {
    background: var(--lp-pinta2);
    background: var(--ly-chip, #242029);
}
.lp-jako-kohde.ly-painettu { background: var(--lp-pinta2); }
.lp-napautus.ly-painettu { background: var(--ly-chip, rgba(19, 16, 22, 0.16)); }

/* ---------- Fokus: 3 px rengas, vain näppäimistöllä ---------- */
.lp-iso:focus, .lp-valinta:focus, .lp-jako-kohde:focus, .lp-pieni-nappi:focus, .lp-valikkonappi:focus, .lp-napautus:focus,
.lp-salainen:focus, .lp-kytkin:focus, .lp-sulje:focus, .lp-kentta input:focus, .lp-valikko-ala a:focus {
    outline: 3px solid var(--lp-muste);
    outline: 3px solid var(--ly-fokus, #F4EFF3);
    outline-offset: 3px;
}
.lp-iso:focus:not(:focus-visible), .lp-valinta:focus:not(:focus-visible), .lp-jako-kohde:focus:not(:focus-visible),
.lp-pieni-nappi:focus:not(:focus-visible), .lp-valikkonappi:focus:not(:focus-visible), .lp-napautus:focus:not(:focus-visible),
.lp-salainen:focus:not(:focus-visible), .lp-kytkin:focus:not(:focus-visible), .lp-sulje:focus:not(:focus-visible),
.lp-valikko-ala a:focus:not(:focus-visible) { outline: none; }
.lp-valikko .lp-kytkin:focus, .lp-valikko .lp-sulje:focus, .lp-valikko-ala a:focus { outline-color: var(--lp-muste); }

/* ---------- Vaaka ja matala ruutu (4.23) ---------- */
@media (orientation: landscape) and (max-height: 500px) {
    .lp-ruutu { gap: 12px; padding-top: 16px; padding-top: calc(max(6px, env(safe-area-inset-top)) + 10px); }
    .lp-sisalto > .lp-keskelle { min-height: 0; }
    .lp-napautus { min-height: 60vh; font-size: 120px; font-size: min(38vh, 160px); }
    .lp-yla { min-height: 48px; }
    .lp-ohjaus { padding-top: 6px; }
    .lp-ohjaus .ly-nappi { min-height: 48px; min-height: var(--ly-kohde-min, 48px); }
    .lp-salainen { min-height: 40vh; }
}

@media (prefers-reduced-motion: reduce) {
    body, .lp-ohjaus, .lp-iso, .lp-valinta, .lp-jako-kohde, .lp-pieni-nappi, .lp-valikkonappi, .lp-napautus, .lp-salainen,
    .lp-kytkin, .lp-kytkin-rata, .lp-kytkin-rata i, .lp-sulje { transition: none !important; }
}