/* ============================================================ KIPPIS LAVA: YHTEISET TYYLIT (iso ruutu ja puhelin) _lava-sovellusmainen.md luku 1, DESIGN.md luvut 3, 5.8, 6 ja 7. Ladataan ennen pinnan omaa tyylitiedostoa (lava-tv.css tai lava-puhelin.css). Pinta tulee juuresta: tai . Värikenttä kääntää roolitokenit (1.3), joten komponentti tai lisäosa ei tarvitse omia kenttäsääntöjä. Kippis on painettu, ei valaistu. Litteä väri ja muste: ei liukuja, hehkua, kiiltoa eikä sumennusta. box-shadow on vain inset-reuna tai paperilapun kova siirtymä. Pienin teksti --ly-t-pieni. Telkkari lataa tämän tiedoston (Chromium 68): ei flexin gapia (grid tai lasten marginaalit) ja tavallinen varakeino ennen jokaista min(), max(), clamp(), dvh:ta ja env():iä. ============================================================ */ /* ---------- 1.2 Tokenit (sanatarkasti suunnitelmasta) ---------- */ :root { /* Pinnat, muste ja toiminto (DESIGN.md 3.1, 3.2, 3.4) */ --ly-pohja: #131016; --ly-pinta: #1B1721; --ly-pinta-2: #242029; --ly-viiva: #302A38; /* vain koriste, ei koskaan ainoa reuna */ --ly-raja: #786D7E; /* reunat, 3,6:1 pinnalla */ --ly-teksti: #F4EFF3; --ly-himmea: #9C909F; --ly-korostus: #FF2D6F; --ly-muste: #131016; --ly-virhe: #FF6B57; --ly-ok: #4B9E7A; --ly-paperi: #F4EFF3; --ly-scrim: rgba(19, 16, 22, 0.72); /* Liike (DESIGN.md 3.6, 7.1) */ --ly-nopea: 150ms; --ly-hidas: 260ms; --ly-sisaan: 160ms; --ly-ease: cubic-bezier(.2, .8, .2, 1); /* Roolit, jotka kääntyvät värikentällä (1.3). Lisäosat käyttävät näitä, eivät omia kenttäsääntöjä. */ --ly-fg: var(--ly-teksti); --ly-fg-2: var(--ly-himmea); --ly-chip: var(--ly-pinta-2); --ly-rata: var(--ly-viiva); --ly-tayte: var(--ly-teksti); --ly-reuna: var(--ly-raja); --ly-fokus: var(--ly-teksti); /* Värin roolit: vain nämä kolme. Asetetaan elementille inline, ei koskaan omalla nimellä. */ --ly-mek: var(--ly-korostus); --ly-pelaaja: #4B9E7A; --ly-joukkue: #E4412F; /* Mitat, puhelin (oletus) */ --ly-t-pieni: 14px; --ly-t-leipa: 17px; --ly-t-iso: 22px; --ly-t-otsikko: 32px; --ly-t-verbi: 44px; --ly-t-jattilainen: 96px; --ly-t-laskuri: 120px; --ly-r: 16px; --ly-r-kortti: 22px; --ly-r-pilleri: 999px; --ly-kohde: 56px; --ly-kohde-min: 48px; --ly-rako: 12px; --ly-reuna-leveys: 2px; --ly-siirto: 6px; --ly-z-lehti: 9600; } html[data-ly="tv"] { --ly-u: 1vh; --ly-t-pieni: calc(var(--ly-u) * 3); --ly-t-leipa: calc(var(--ly-u) * 3.8); --ly-t-iso: calc(var(--ly-u) * 5); --ly-t-otsikko: calc(var(--ly-u) * 9); --ly-t-verbi: calc(var(--ly-u) * 17); --ly-t-jattilainen: calc(var(--ly-u) * 30); --ly-t-laskuri: calc(var(--ly-u) * 46); --ly-r: calc(var(--ly-u) * 1.4); --ly-r-kortti: calc(var(--ly-u) * 2.2); --ly-kohde: calc(var(--ly-u) * 8); --ly-kohde-min: calc(var(--ly-u) * 6); --ly-rako: calc(var(--ly-u) * 2); --ly-reuna-leveys: calc(var(--ly-u) * 0.4); --ly-sisaan: 200ms; } @supports (width: min(1px, 2px)) { html[data-ly="tv"] { --ly-u: min(1vh, 0.5625vw); /* Sama suhde lappuun kuin puhelimen 6 px: 6 px vanhalla selaimella, noin 12 px 1080p-telkkarissa. */ --ly-siirto: max(6px, calc(var(--ly-u) * 1.1)); } } /* ---------- Lisätokenit (1.2 sallii lisäämisen, ei uudelleennimeämistä) ---------- */ :root { --ly-fontti: 'DM Sans VF', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --ly-r-lehti: 24px; /* Roolit komponenttien omille osille. Kenttä kääntää nämäkin (alla). */ --ly-rengas: transparent; /* värillisen pisteen rengas: kentällä muste */ --ly-pinkki-pohja: var(--ly-korostus); /* pinkki nappi, leima ja jaa-siru */ --ly-pinkki-muste: var(--ly-muste); /* muste pinkillä, ei koskaan valkoista */ --ly-pinkki-painettu: #E0245F; --ly-vaara: var(--ly-virhe); /* --ly-mek-fg ja kentän mekaniikkateksti: vain kentällä, muuten var(--ly-mek). */ } html[data-ly="tv"] { --ly-r-lehti: calc(var(--ly-u) * 2.4); } /* ---------- 1.3 Värikentän roolit ---------- */ body[data-kentta="pinkki"], body[data-kentta="vari"], body[data-vari="pinkki"], body[data-vari="joukkue"] { --ly-fg: #131016; /* 84 % muste (suunnitelmassa 72 %): 72 % jäi pinkillä 3,8:1:een ja joukkuevärillä 3,4:1:een, 84 % on pinkillä 4,5:1 (integraation mittaus 15.9.2026). */ --ly-fg-2: rgba(19, 16, 22, 0.84); --ly-chip: rgba(19, 16, 22, 0.16); --ly-rata: rgba(19, 16, 22, 0.22); --ly-tayte: #131016; --ly-reuna: rgba(19, 16, 22, 0.45); --ly-fokus: #131016; } /* Kentällä pinkki muuttuu musteeksi (leima, nappi, jaa-siru) ja mekaniikan väri musteeksi. */ body[data-kentta="pinkki"], body[data-kentta="vari"], body[data-vari="pinkki"], body[data-vari="joukkue"] { --ly-rengas: #131016; --ly-pinkki-pohja: #131016; --ly-pinkki-muste: #F4EFF3; --ly-pinkki-painettu: #302A38; --ly-vaara: #131016; --ly-mek-fg: #131016; } /* hidden piilottaa aina, vaikka komponentti asettaa displayn. */ [class^="ly-"][hidden], [class*=" ly-"][hidden] { display: none !important; } /* ---------- 1.4 Liike: koko yhteinen joukko, kaikki päättyviä ---------- */ @keyframes lySisaan { from { opacity: 0; } to { opacity: 1; } } @keyframes lyLeima { from { opacity: 0; transform: rotate(var(--ly-kulma, -6deg)) scale(1.35); } to { opacity: 1; transform: rotate(var(--ly-kulma, -6deg)); } } @keyframes lyIsku { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } } @keyframes lyPudotus { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @keyframes lyNousu { from { transform: translateY(28px); } to { transform: none; } } @keyframes lyHaivytys { from { opacity: 0; } to { opacity: 1; } } /* Askeleen yksi sisääntulo (luku 3). Ei elementtikohtaisia sisääntuloja. */ [data-ly-sisaan] { animation: lySisaan var(--ly-sisaan) var(--ly-ease) both; } .ly-pudota { animation: lyPudotus var(--ly-nopea) var(--ly-ease) both; } /* Paluu taustalta: sisältö himmenee, kunnes tuore tila tulee. */ [data-ly-himmenna] { transition: opacity var(--ly-nopea) var(--ly-ease); } html[data-ly-yhteys="paivitetaan"] [data-ly-himmenna] { opacity: .45; pointer-events: none; } /* ============================================================ Teksti ============================================================ */ .ly-mek { display: block; margin: 0 0 8px; color: var(--ly-fg); font-family: var(--ly-fontti); font-size: var(--ly-t-pieni); font-weight: 800; line-height: 1.25; word-break: break-word; overflow-wrap: anywhere; } .ly-mek::before { content: ''; display: inline-block; width: .75em; height: .75em; margin-right: .5em; border-radius: 50%; background: var(--ly-mek); box-shadow: inset 0 0 0 var(--ly-reuna-leveys) var(--ly-rengas); vertical-align: -.08em; } /* Versaali on sallittu vain huudossa ja leimassa, ja se tulee tekstistä, ei CSS:stä. */ .ly-huuto { margin: 0; color: var(--ly-fg); font-family: var(--ly-fontti); font-weight: 1000; line-height: .92; word-break: break-word; overflow-wrap: anywhere; } .ly-huuto--otsikko { font-size: var(--ly-t-otsikko); letter-spacing: -0.02em; line-height: 1.02; } .ly-huuto--verbi { font-size: var(--ly-t-verbi); letter-spacing: -0.045em; } .ly-huuto--jattilainen { font-size: var(--ly-t-jattilainen); letter-spacing: -0.045em; line-height: .88; } .ly-huuto--mek { color: var(--ly-mek-fg, var(--ly-mek)); } .ly-huuto--pinkki { color: var(--ly-mek-fg, var(--ly-korostus)); } .ly-huuto--isku { animation: lyIsku var(--ly-hidas) var(--ly-ease) both; } .ly-rivi { margin: 0; color: var(--ly-fg); font-family: var(--ly-fontti); font-size: var(--ly-t-leipa); font-weight: 500; line-height: 1.4; word-break: break-word; overflow-wrap: anywhere; } .ly-rivi--iso { font-size: var(--ly-t-iso); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; } .ly-rivi--pieni { font-size: var(--ly-t-pieni); } .ly-rivi--himmea { color: var(--ly-fg-2); } /* Tilarivi pysyy täysvärisenä: himmeä muste on pinkillä liian heikko 14 px:n tekstille. */ .ly-rivi--tila { min-height: 1.4em; font-size: var(--ly-t-pieni); font-weight: 800; font-variant-numeric: tabular-nums; } .ly-luku { margin: 0; color: var(--ly-fg); font-family: var(--ly-fontti); font-weight: 1000; line-height: .9; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; } .ly-luku--otsikko { font-size: var(--ly-t-otsikko); letter-spacing: -0.02em; } .ly-luku--verbi { font-size: var(--ly-t-verbi); } .ly-luku--jattilainen { font-size: var(--ly-t-jattilainen); } .ly-luku--laskuri { font-size: var(--ly-t-laskuri); line-height: .85; text-align: center; } /* ============================================================ Aika ============================================================ */ .ly-aikapalkki { position: relative; display: block; height: 6px; margin: 0; border-radius: var(--ly-r-pilleri); background: var(--ly-rata); } .ly-aikapalkki--paksu { height: 12px; } /* Sekunnit tarvitsevat tilan palkin yläpuolelta: varattu aina, jotta mikään ei hyppää viimeisillä sekunneilla. */ .ly-aikapalkki--sekunnit { margin-top: calc(var(--ly-t-iso) + 8px); } .ly-aikapalkki i { display: block; height: 100%; border-radius: inherit; background: var(--ly-tayte); transform-origin: left center; } .ly-aikapalkki-s { position: absolute; right: 0; bottom: 100%; margin-bottom: 6px; color: var(--ly-fg); font-family: var(--ly-fontti); font-size: var(--ly-t-iso); font-weight: 1000; line-height: 1; font-variant-numeric: tabular-nums; } .ly-pipit { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 -8px; padding: 0; } .ly-pipit span { display: block; width: 14px; height: 14px; margin: 0 8px 8px 0; border-radius: 50%; box-shadow: inset 0 0 0 var(--ly-reuna-leveys) var(--ly-reuna); } .ly-pipit span.tehty { background: var(--ly-tayte); box-shadow: none; } .ly-pipit span.nyt { box-shadow: inset 0 0 0 calc(var(--ly-reuna-leveys) * 2) var(--ly-fg); transform: scale(1.3); } /* ============================================================ Pelaajat: yksi merkintä kaikkialla, piste pelaajan värissä ja nimi sirulla ============================================================ */ .ly-nimet { display: flex; flex-wrap: wrap; align-items: flex-start; margin: 0 0 calc(var(--ly-rako) * -0.75); padding: 0; list-style: none; } .ly-nimet > * { max-width: 100%; margin: 0 calc(var(--ly-rako) * 0.75) calc(var(--ly-rako) * 0.75) 0; } .ly-nimi { display: inline-flex; align-items: center; box-sizing: border-box; max-width: 100%; min-height: 40px; padding: 6px 14px 6px 12px; border-radius: var(--ly-r-pilleri); background: var(--ly-chip); color: var(--ly-fg); font-family: var(--ly-fontti); font-size: var(--ly-t-leipa); font-weight: 800; line-height: 1.15; vertical-align: middle; } .ly-piste { flex: none; display: inline-block; width: .62em; height: .62em; margin-right: .5em; border-radius: 50%; background: var(--ly-pelaaja); box-shadow: inset 0 0 0 var(--ly-reuna-leveys) var(--ly-rengas); } .ly-nimi b { min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 800; } .ly-nimi small { flex: none; margin-left: .5em; color: var(--ly-fg-2); font-size: var(--ly-t-pieni); font-weight: 500; } .ly-nimi--pieni { min-height: 32px; padding: 4px 12px 4px 10px; font-size: var(--ly-t-pieni); } .ly-nimi--iso { min-height: 52px; padding: 8px 18px 8px 14px; font-size: var(--ly-t-iso); letter-spacing: -0.02em; } .ly-nimi--iso b { overflow: visible; white-space: normal; text-overflow: clip; word-break: break-word; overflow-wrap: anywhere; } .ly-nimi.valittu { box-shadow: inset 0 0 0 var(--ly-reuna-leveys) var(--ly-fg); } /* 60 %: 45 % jätti puhelimen 14 px:n nimen 4,0:1:een (katselmointi 15.9.2026, Vesiputouksen ketju). */ .ly-nimi.poissa { opacity: .6; } .ly-nimi.korostus { background: var(--ly-pelaaja); color: var(--ly-muste); } .ly-nimi.korostus .ly-piste { background: var(--ly-muste); box-shadow: none; } /* Täysi muste: 72 % musteesta jäi pelaajan sinisellä 3,1:1:een (integraatio 15.9.2026). */ .ly-nimi.korostus small { color: var(--ly-muste); } .ly-nimi-nappi { display: flex; align-items: center; box-sizing: border-box; width: 100%; min-height: var(--ly-kohde); margin: 0; padding: 8px 18px 8px 14px; border: var(--ly-reuna-leveys) solid transparent; border-radius: var(--ly-r); background: var(--ly-chip); color: var(--ly-fg); font-family: var(--ly-fontti); font-size: var(--ly-t-iso); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: transform var(--ly-nopea) var(--ly-ease), background-color var(--ly-nopea) var(--ly-ease); } .ly-nimi-nappi .ly-piste { width: 14px; height: 14px; margin-right: 12px; } .ly-nimi-teksti { flex: 1 1 auto; min-width: 0; word-break: break-word; overflow-wrap: anywhere; } .ly-nimi-nappi small { flex: none; margin-left: 10px; color: var(--ly-fg-2); font-size: var(--ly-t-pieni); font-weight: 500; letter-spacing: 0; } .ly-nimi-nappi[aria-pressed="true"] { background: var(--ly-pelaaja); color: var(--ly-muste); } .ly-nimi-nappi[aria-pressed="true"] .ly-piste { background: var(--ly-muste); box-shadow: none; } .ly-nimi-nappi[aria-pressed="true"] small { color: rgba(19, 16, 22, 0.72); } .ly-nimi-nappi.kielletty, .ly-nimi-nappi:disabled:not([aria-pressed="true"]) { border-style: dashed; border-color: var(--ly-reuna); background: transparent; color: var(--ly-fg-2); cursor: default; } .ly-tulosrivi { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) auto; grid-column-gap: var(--ly-rako); column-gap: var(--ly-rako); align-items: center; margin: 0 0 calc(var(--ly-rako) * 0.75); } .ly-tulosrivi .ly-nimi { justify-self: start; } .ly-tulosrivi-palkki { display: block; height: 12px; border-radius: var(--ly-r-pilleri); background: var(--ly-rata); } .ly-tulosrivi-palkki i { display: block; height: 100%; border-radius: inherit; background: var(--ly-pelaaja); box-shadow: inset 0 0 0 var(--ly-reuna-leveys) var(--ly-rengas); transform-origin: left center; animation: lySisaan var(--ly-hidas) var(--ly-ease) both; } .ly-tulosrivi-arvo { min-width: 2ch; color: var(--ly-fg); font-family: var(--ly-fontti); font-size: var(--ly-t-iso); font-weight: 1000; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } /* ============================================================ Tulos ============================================================ */ .ly-leima { display: inline-block; margin: 0; padding: .14em .42em .16em; border-radius: 6px; background: var(--ly-pinkki-pohja); color: var(--ly-pinkki-muste); font-family: var(--ly-fontti); font-size: var(--ly-t-iso); font-weight: 1000; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; transform: rotate(var(--ly-kulma, -6deg)); animation: lyLeima var(--ly-hidas) var(--ly-ease) both; } /* Mustella leimalla on reunaviiva, jotta se erottuu myös tummalta pohjalta. Kentällä viiva sulautuu musteeseen. */ .ly-leima--muste { background: var(--ly-muste); color: var(--ly-paperi); box-shadow: inset 0 0 0 var(--ly-reuna-leveys) var(--ly-reuna); } .ly-juomat { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 calc(var(--ly-rako) * -0.75); } .ly-juomat > * { margin: 0 calc(var(--ly-rako) * 0.75) calc(var(--ly-rako) * 0.75) 0; } .ly-juomat > .ly-juoma-yhteinen { flex: 0 0 100%; margin-right: 0; } .ly-juoma-yhteinen { color: var(--ly-fg); font-family: var(--ly-fontti); font-size: var(--ly-t-otsikko); font-weight: 1000; line-height: 1; letter-spacing: -0.02em; animation: lyPudotus var(--ly-nopea) var(--ly-ease) both; } /* inline-block eikä flex: flex söisi välilyönnin nimen ja "ota 1":n välistä. */ .ly-juoma { display: inline-block; padding: 8px 16px 8px 12px; border-radius: var(--ly-r-pilleri); background: var(--ly-chip); color: var(--ly-fg); font-family: var(--ly-fontti); font-size: var(--ly-t-leipa); font-weight: 800; line-height: 1.1; white-space: nowrap; animation: lyPudotus var(--ly-nopea) var(--ly-ease) both; } .ly-juoma::before { content: ''; display: inline-block; width: .62em; height: .62em; margin-right: .45em; border-radius: 50%; background: var(--ly-pelaaja); box-shadow: inset 0 0 0 var(--ly-reuna-leveys) var(--ly-rengas); vertical-align: -.04em; } .ly-juoma b { font-weight: 1000; } .ly-juoma.jaa { background: var(--ly-pinkki-pohja); color: var(--ly-pinkki-muste); } .ly-juoma.jaa::before { box-shadow: inset 0 0 0 var(--ly-reuna-leveys) var(--ly-muste); } .ly-omat-juomat { margin: 0; color: var(--ly-fg); font-family: var(--ly-fontti); font-size: var(--ly-t-iso); font-weight: 1000; line-height: 1.2; letter-spacing: -0.02em; word-break: break-word; overflow-wrap: anywhere; } /* Puhelimen paljastus. Grid eikä flexin gap, koska telkkari lataa saman tiedoston. */ .ly-keskelle { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; grid-row-gap: 14px; row-gap: 14px; flex: 1 1 auto; min-height: 0; } .ly-tulos { margin: 0; color: var(--ly-fg); font-family: var(--ly-fontti); font-size: var(--ly-t-otsikko); font-weight: 1000; line-height: 1.05; letter-spacing: -0.02em; word-break: break-word; overflow-wrap: anywhere; } .ly-panos { margin: 0; color: var(--ly-fg); font-family: var(--ly-fontti); font-size: var(--ly-t-iso); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; word-break: break-word; overflow-wrap: anywhere; } /* ============================================================ Toiminnot ============================================================ */ .ly-nappi { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: var(--ly-kohde); margin: 0; padding: 8px 22px; border: 0; border-radius: var(--ly-r-pilleri); background: var(--ly-pinkki-pohja); color: var(--ly-pinkki-muste); font-family: var(--ly-fontti); font-size: var(--ly-t-leipa); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; text-align: center; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: transform var(--ly-nopea) var(--ly-ease), background-color var(--ly-nopea) var(--ly-ease), opacity var(--ly-nopea) var(--ly-ease); } .ly-nappi--pinkki { background: var(--ly-pinkki-pohja); color: var(--ly-pinkki-muste); } .ly-nappi--reuna { background: transparent; color: var(--ly-fg); box-shadow: inset 0 0 0 var(--ly-reuna-leveys) var(--ly-reuna); } .ly-nappi--hiljainen { background: var(--ly-chip); color: var(--ly-fg); } .ly-nappi--vaara { background: transparent; color: var(--ly-fg); box-shadow: inset 0 0 0 var(--ly-reuna-leveys) var(--ly-vaara); } .ly-nappi--pieni { display: inline-flex; width: auto; min-height: var(--ly-kohde-min); padding: 6px 20px; } /* Pois päältä: katkoviiva ja teksti kertoo syyn. Lähetyksen aikana (aria-busy) nappi pitää värinsä. */ .ly-nappi:disabled:not([aria-busy="true"]), .ly-nappi[aria-disabled="true"] { border: var(--ly-reuna-leveys) dashed var(--ly-reuna); background: transparent; color: var(--ly-fg); box-shadow: none; cursor: default; } /* Lähetyksen aikana väri ja teksti pysyvät täysinä, kiireen kertoo sisäreunus. 70 % läpinäkyvä pinkki nappi oli musteella 3,2:1 (katselmointi 15.9.2026, Presidentin kutsunappi 360 px:llä). */ .ly-nappi[aria-busy="true"] { cursor: progress; box-shadow: inset 0 0 0 var(--ly-reuna-leveys) currentColor; } /* Painallus: heti sisään, 150 ms ulos. .ly-painettu tulee KippisLavaOsat.painallus()-kuuntelijasta, :active on vara. */ [data-ly-paina] { transition: transform var(--ly-nopea) var(--ly-ease); } .ly-nappi.ly-painettu, .ly-nimi-nappi.ly-painettu, [data-ly-paina].ly-painettu { transform: scale(.96); transition: none; } .ly-nappi:not(:disabled):active, .ly-nimi-nappi:not(:disabled):active { transform: scale(.96); } .ly-nappi--pinkki.ly-painettu, .ly-nappi--pinkki:not(:disabled):active { background: var(--ly-pinkki-painettu); } .ly-nappi--reuna.ly-painettu, .ly-nappi--vaara.ly-painettu, .ly-nappi--reuna:not(:disabled):active, .ly-nappi--vaara:not(:disabled):active { background: var(--ly-chip); } .ly-nappi--hiljainen.ly-painettu, .ly-nappi--hiljainen:not(:disabled):active { background: var(--ly-rata); } .ly-nimi-nappi.ly-painettu:not([aria-pressed="true"]) { background: var(--ly-rata); } .ly-nappi[aria-disabled="true"]:active, .ly-nappi[aria-busy="true"]:active { transform: none; } /* Lähetys kesken: ryhmän muut vaihtoehdot hiljenevät, valittu pysyy. */ .ly-lahetetaan [aria-pressed="false"] { opacity: .6; } /* Fokusrengas. :focus ensin, jotta Chromium 68 (ei :focus-visiblea) näyttää renkaan aina. */ .ly-nappi:focus, .ly-nimi-nappi:focus, .ly-syote:focus, [data-ly-paina]:focus { outline: 3px solid var(--ly-fokus); outline-offset: 3px; } .ly-nappi:focus:not(:focus-visible), .ly-nimi-nappi:focus:not(:focus-visible), [data-ly-paina]:focus:not(:focus-visible) { outline: none; } /* ============================================================ Järjestelmä: ilmoitus, lehti, yhteys ja paperilappu ============================================================ */ .ly-ilmoitus { position: fixed; left: 50%; bottom: 18px; bottom: var(--ly-ilmoitus-ala, 18px); bottom: calc(var(--ly-ilmoitus-ala, 18px) + env(safe-area-inset-bottom, 0px)); z-index: 9610; box-sizing: border-box; width: -webkit-max-content; width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 14px 20px; border-radius: var(--ly-r); background: var(--ly-pinta-2); color: var(--ly-teksti); box-shadow: inset 0 0 0 1px var(--ly-raja); font-family: var(--ly-fontti); font-size: var(--ly-t-pieni); font-weight: 800; line-height: 1.3; text-align: left; pointer-events: none; transform: translateX(-50%); animation: lyHaivytys 160ms var(--ly-ease) both; } .ly-ilmoitus--virhe { padding-left: 26px; box-shadow: inset 6px 0 0 var(--ly-virhe), inset 0 0 0 1px var(--ly-raja); } .ly-yhteys { position: fixed; left: 50%; top: 10px; top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 9620; box-sizing: border-box; width: -webkit-max-content; width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 10px 18px; border-radius: var(--ly-r); background: var(--ly-pinta-2); color: var(--ly-teksti); box-shadow: inset 0 0 0 1px var(--ly-raja); font-family: var(--ly-fontti); font-size: var(--ly-t-pieni); font-weight: 800; line-height: 1.3; text-align: center; pointer-events: none; transform: translateX(-50%); animation: lyHaivytys 160ms var(--ly-ease) both; } .ly-scrim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9600; background: var(--ly-scrim); animation: lyHaivytys 160ms var(--ly-ease) both; } .ly-lehti { /* Lehti on aina tumma, vaikka ruutu olisi värikenttä: roolit takaisin pinnan arvoihin. */ --ly-fg: var(--ly-teksti); --ly-fg-2: var(--ly-himmea); --ly-chip: var(--ly-pinta-2); --ly-rata: var(--ly-viiva); --ly-tayte: var(--ly-teksti); --ly-reuna: var(--ly-raja); --ly-fokus: var(--ly-teksti); --ly-rengas: transparent; --ly-pinkki-pohja: var(--ly-korostus); --ly-pinkki-muste: var(--ly-muste); --ly-pinkki-painettu: #E0245F; --ly-vaara: var(--ly-virhe); position: fixed; left: 0; right: 0; bottom: 0; z-index: 9601; box-sizing: border-box; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 10px 20px 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); border-radius: var(--ly-r-lehti) var(--ly-r-lehti) 0 0; background: var(--ly-pinta); color: var(--ly-teksti); font-family: var(--ly-fontti); text-align: left; animation: lyNousu 200ms var(--ly-ease) both; } .ly-lehti-kahva { width: 40px; height: 4px; margin: 0 auto 6px; border-radius: 2px; background: var(--ly-raja); } .ly-lehti-otsikko { margin: 14px 0 10px; color: var(--ly-teksti); font-size: 28px; font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; word-break: break-word; overflow-wrap: anywhere; } .ly-lehti-otsikko:focus { outline: none; } .ly-lehti-teksti { margin: 0; color: var(--ly-teksti); font-size: var(--ly-t-leipa); font-weight: 500; line-height: 1.45; } .ly-lehti-napit { display: grid; grid-template-columns: minmax(0, 1fr); grid-row-gap: 10px; row-gap: 10px; margin-top: 22px; } .ly-kentta { display: block; margin: 18px 0 0; } .ly-kentta > span { display: block; margin: 0 0 8px; color: var(--ly-teksti); font-size: var(--ly-t-pieni); font-weight: 800; } .ly-syote { display: block; box-sizing: border-box; width: 100%; min-height: var(--ly-kohde); margin: 0; padding: 12px 16px; border: var(--ly-reuna-leveys) solid var(--ly-raja); border-radius: var(--ly-r); background: var(--ly-pohja); color: var(--ly-teksti); font-family: var(--ly-fontti); font-size: 16px; font-weight: 500; -webkit-appearance: none; -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } .ly-syote:focus { border-color: var(--ly-teksti); } @media (min-width: 720px) { html:not([data-ly="tv"]) .ly-lehti { left: 50%; right: auto; top: 50%; bottom: auto; width: 460px; max-height: 88vh; padding: 10px 24px 24px; border-radius: var(--ly-r-lehti); transform: translate(-50%, -50%); animation: lyHaivytys 160ms var(--ly-ease) both; } html:not([data-ly="tv"]) .ly-lehti-kahva { display: none; } .ly-lehti-napit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-column-gap: 12px; column-gap: 12px; } } /* Paperilappu (DESIGN.md 6): paperi, muste ja kova pinkki siirtymä. Enintään yksi per ruutu, vain ruudun tärkeimmälle esineelle. Ei hinnoille, ei ostonapeille, ei yleiseksi korttityyliksi. */ .ly-paperilappu { --ly-fg: var(--ly-muste); --ly-fg-2: rgba(19, 16, 22, 0.72); --ly-fokus: var(--ly-muste); --ly-rengas: var(--ly-muste); position: relative; display: block; box-sizing: border-box; margin: 0 var(--ly-siirto) var(--ly-siirto) 0; padding: 14px 18px; border-radius: 14px; background: var(--ly-paperi); color: var(--ly-muste); box-shadow: var(--ly-siirto) var(--ly-siirto) 0 0 var(--ly-korostus); font-family: var(--ly-fontti); font-weight: 1000; line-height: 1.1; -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } .ly-paperilappu--osoite { font-size: 30px; font-size: clamp(28px, 8vw, 36px); letter-spacing: -0.03em; word-break: break-word; overflow-wrap: anywhere; } .ly-paperilappu--koodi { display: inline-block; max-width: 100%; padding: 12px 20px 14px; font-size: 40px; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; } /* Ryhmä ei katkea, mutta kapeassa sarakkeessa toinen ryhmä saa siirtyä omalle rivilleen. */ .ly-paperilappu--koodi span { display: inline-block; white-space: nowrap; } .ly-paperilappu--koodi span + span { margin-left: .3em; } .ly-paperilappu--aula { display: grid; justify-items: start; grid-row-gap: 12px; row-gap: 12px; padding: 18px 20px; } .ly-paperilappu--aula canvas, .ly-paperilappu--aula img, .ly-paperilappu--aula svg { display: block; max-width: 100%; height: auto; } /* ============================================================ Iso ruutu: mitat --ly-u:sta (1vh, 16:9 ruudulla korkeuden mukaan) ============================================================ */ html[data-ly="tv"] .ly-mek { margin-bottom: calc(var(--ly-u) * 1.2); font-size: var(--ly-t-leipa); } html[data-ly="tv"] .ly-rivi--tila { font-size: var(--ly-t-leipa); } html[data-ly="tv"] .ly-aikapalkki { height: calc(var(--ly-u) * 1); } html[data-ly="tv"] .ly-aikapalkki--paksu { height: calc(var(--ly-u) * 2); } html[data-ly="tv"] .ly-aikapalkki--sekunnit { margin-top: calc(var(--ly-t-otsikko) + var(--ly-u) * 1.2); } html[data-ly="tv"] .ly-aikapalkki-s { margin-bottom: calc(var(--ly-u) * 1); font-size: var(--ly-t-otsikko); } html[data-ly="tv"] .ly-pipit { margin-bottom: calc(var(--ly-u) * -1); } html[data-ly="tv"] .ly-pipit span { width: calc(var(--ly-u) * 2.4); height: calc(var(--ly-u) * 2.4); margin: 0 calc(var(--ly-u) * 1.2) calc(var(--ly-u) * 1) 0; } html[data-ly="tv"] .ly-nimi { min-height: calc(var(--ly-u) * 6); padding: calc(var(--ly-u) * 0.8) calc(var(--ly-u) * 2) calc(var(--ly-u) * 0.8) calc(var(--ly-u) * 1.5); } html[data-ly="tv"] .ly-nimi--pieni { min-height: calc(var(--ly-u) * 4.8); padding: calc(var(--ly-u) * 0.5) calc(var(--ly-u) * 1.6) calc(var(--ly-u) * 0.5) calc(var(--ly-u) * 1.2); } html[data-ly="tv"] .ly-nimi--iso { min-height: calc(var(--ly-u) * 8); padding: calc(var(--ly-u) * 1) calc(var(--ly-u) * 2.6) calc(var(--ly-u) * 1) calc(var(--ly-u) * 2); } html[data-ly="tv"] .ly-nimi-nappi { padding: calc(var(--ly-u) * 1) calc(var(--ly-u) * 2.4) calc(var(--ly-u) * 1) calc(var(--ly-u) * 1.8); } html[data-ly="tv"] .ly-nimi-nappi .ly-piste { width: calc(var(--ly-u) * 2); height: calc(var(--ly-u) * 2); margin-right: calc(var(--ly-u) * 1.4); } html[data-ly="tv"] .ly-nimi-nappi small { margin-left: calc(var(--ly-u) * 1.2); } html[data-ly="tv"] .ly-tulosrivi-palkki { height: calc(var(--ly-u) * 2); } html[data-ly="tv"] .ly-leima { border-radius: calc(var(--ly-u) * 0.8); } html[data-ly="tv"] .ly-juoma { padding: calc(var(--ly-u) * 0.9) calc(var(--ly-u) * 2.2) calc(var(--ly-u) * 0.9) calc(var(--ly-u) * 1.4); } html[data-ly="tv"] .ly-juoma.jaa { font-size: var(--ly-t-iso); } /* TV: ei negatiivista alamarginaalia, jotta sovita() mittaa huikkarivit oikein eikä rivi ulotu lavan alareunan yli (katselmointi 15.9.2026, Jänistäjän paljastus). */ html[data-ly="tv"] .ly-juomat { margin-bottom: 0; } /* Monta sirua (lyJuomaLohko lisää monta-luokan kuudesta sirusta): jaa-sirut leipätekstin kokoon ja kapeammat välit, jotta 8 pelaajan huikat mahtuvat kahdelle riville. Jaa erottuu yhä pinkillä pohjalla ja paksulla nimellä. */ html[data-ly="tv"] .ly-juomat.monta > * { margin: 0 calc(var(--ly-u) * 1) calc(var(--ly-u) * 1) 0; } html[data-ly="tv"] .ly-juomat.monta > .ly-juoma-yhteinen { margin-right: 0; } html[data-ly="tv"] .ly-juomat.monta .ly-juoma { padding: calc(var(--ly-u) * 0.6) calc(var(--ly-u) * 1.7) calc(var(--ly-u) * 0.6) calc(var(--ly-u) * 1.1); } html[data-ly="tv"] .ly-juomat.monta .ly-juoma.jaa { font-size: var(--ly-t-leipa); } html[data-ly="tv"] .ly-nappi { padding: calc(var(--ly-u) * 1) calc(var(--ly-u) * 3.2); } html[data-ly="tv"] .ly-nappi--pieni { padding: calc(var(--ly-u) * 0.8) calc(var(--ly-u) * 2.4); } html[data-ly="tv"] .ly-nappi:focus, html[data-ly="tv"] .ly-nimi-nappi:focus, html[data-ly="tv"] .ly-syote:focus, html[data-ly="tv"] [data-ly-paina]:focus { outline-width: calc(var(--ly-u) * 0.6); outline-offset: calc(var(--ly-u) * 0.5); } html[data-ly="tv"] .ly-ilmoitus { bottom: calc(var(--ly-u) * 4); max-width: calc(var(--ly-u) * 130); padding: calc(var(--ly-u) * 1.6) calc(var(--ly-u) * 2.8); font-size: var(--ly-t-leipa); } html[data-ly="tv"] .ly-ilmoitus--virhe { padding-left: calc(var(--ly-u) * 3.6); box-shadow: inset calc(var(--ly-u) * 0.8) 0 0 var(--ly-virhe), inset 0 0 0 1px var(--ly-raja); } html[data-ly="tv"] .ly-yhteys { top: calc(var(--ly-u) * 2.4); max-width: calc(var(--ly-u) * 130); padding: calc(var(--ly-u) * 1.2) calc(var(--ly-u) * 2.8); font-size: var(--ly-t-leipa); } /* Telkkarissa lehti on keskitetty kortti ilman nousua: vain scrim häivyttyy. */ html[data-ly="tv"] .ly-lehti { left: 50%; right: auto; top: 50%; bottom: auto; width: 92vw; width: calc(var(--ly-u) * 90); max-width: 92vw; max-height: 88vh; padding: calc(var(--ly-u) * 4); border-radius: var(--ly-r-lehti); transform: translate(-50%, -50%); animation: none; } html[data-ly="tv"] .ly-lehti-otsikko { margin: 0 0 calc(var(--ly-u) * 1.6); font-size: calc(var(--ly-t-iso) * 1.3); } html[data-ly="tv"] .ly-lehti-napit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-column-gap: calc(var(--ly-u) * 2); column-gap: calc(var(--ly-u) * 2); margin-top: calc(var(--ly-u) * 4); } html[data-ly="tv"] .ly-kentta { margin-top: calc(var(--ly-u) * 2.4); } html[data-ly="tv"] .ly-kentta > span { margin-bottom: calc(var(--ly-u) * 1); font-size: var(--ly-t-pieni); } html[data-ly="tv"] .ly-syote { padding: calc(var(--ly-u) * 1.2) calc(var(--ly-u) * 2); font-size: var(--ly-t-leipa); } html[data-ly="tv"] .ly-paperilappu { padding: calc(var(--ly-u) * 1.6) calc(var(--ly-u) * 2.4); border-radius: var(--ly-r); } html[data-ly="tv"] .ly-paperilappu--osoite { font-size: var(--ly-t-otsikko); } html[data-ly="tv"] .ly-paperilappu--koodi { padding: calc(var(--ly-u) * 1.4) calc(var(--ly-u) * 2.6) calc(var(--ly-u) * 1.6); font-size: var(--ly-t-verbi); } html[data-ly="tv"] .ly-paperilappu--aula { padding: calc(var(--ly-u) * 2.6); grid-row-gap: calc(var(--ly-u) * 1.4); row-gap: calc(var(--ly-u) * 1.4); } /* ---------- Vähennetty liike: jokainen lopputila heti ---------- */ @media (prefers-reduced-motion: reduce) { :root, html[data-ly="tv"] { --ly-nopea: 1ms; --ly-hidas: 1ms; --ly-sisaan: 1ms; } [data-ly-sisaan], .ly-leima, .ly-huuto--isku, .ly-pudota, .ly-juoma, .ly-juoma-yhteinen, .ly-lehti, .ly-scrim { animation: none !important; } .ly-nappi, .ly-nimi-nappi, .ly-aikapalkki i, .ly-tulosrivi-palkki i { transition: none !important; } .ly-tulosrivi-palkki i, .ly-ilmoitus, .ly-yhteys { animation: none !important; } [data-ly-himmenna], [data-ly-paina] { transition: none !important; } }