:root {
  --pohja: #05070a;
  --neon: #3FE0E8;
  --neon-kirkas: #C8FCFF;
  --neon-2: #FF2E88;
  --halytys: #F3E600;
  --teksti-neon: #d9e6e8;
  --teksti-himmea: #8A9498;
  --muste: #e6eef1;
  --muste-2: #93a4ab;
  --virka: #9cc6d8;
  --lasi-viiva: rgba(200, 232, 244, 0.14);
  --viiste: 14px;
}
html { background: var(--pohja); color-scheme: dark; }
body.cg-kaamos {
  color: var(--teksti-neon);
  font: 400 16px/1.6 "Archivo", system-ui, sans-serif;
  font-stretch: 100%;
}
:focus-visible { outline: 2px solid var(--halytys); outline-offset: 3px; }
code, .hud, .ice-kytkin, .liite-yla, .arkisto { font-family: "Share Tech Mono", ui-monospace, monospace; }
a { text-underline-offset: 3px; }

.avaus {
  min-height: 100vh; padding: 32px max(16px, 6vw) 64px;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr;
  column-gap: 4vw; align-items: start;
}
.avaus-julkaisija { grid-column: 1 / -1; font: 14px "Share Tech Mono", monospace; color: var(--teksti-himmea); }
.avaus-julkaisija a { color: inherit; }
.avaus-nimi {
  grid-column: 1; margin-top: 10vh;
  font: 700 clamp(56px, 10.5vw, 168px)/0.88 "Chakra Petch", sans-serif; letter-spacing: -0.01em;
  filter: drop-shadow(0 0 18px rgba(63, 224, 232, 0.45));
}
.fosfori { position: relative; display: inline-block; color: var(--neon-kirkas); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .fosfori {
    color: transparent;
    background:
      repeating-linear-gradient(180deg, transparent 0 3px, rgba(5, 7, 10, 0.55) 3px 4px),
      linear-gradient(180deg, var(--neon) 0%, var(--neon-kirkas) 55%, #ffffff 100%);
    -webkit-background-clip: text; background-clip: text;
  }
  .fosfori::before {
    content: attr(data-teksti); position: absolute; left: 3px; top: 0; z-index: -1;
    color: var(--neon-2); opacity: 0.75; -webkit-background-clip: border-box; background-clip: border-box;
  }
}
.avaus-lause { grid-column: 1; margin-top: 28px; font: 600 clamp(22px, 2.6vw, 34px)/1.2 "Chakra Petch", sans-serif; color: var(--neon-2); }
.avaus-kello { grid-column: 2; grid-row: 2 / span 3; width: min(100%, 480px); margin-top: 8vh; justify-self: center;
  --runko: rgba(63, 224, 232, 0.5); }
.avaus-kello img { filter: drop-shadow(0 0 30px rgba(63, 224, 232, 0.2)); }
.avaus-teksti { grid-column: 1; max-width: 34em; margin-top: 28px; font-size: 18px; color: var(--teksti-neon);
  text-shadow: 0 0 8px var(--pohja), 0 0 3px var(--pohja); }
.avaus-ohje { grid-column: 1; margin-top: 16px; max-width: 34em; font: 15px/1.5 "Share Tech Mono", monospace; color: var(--neon); }
.avaus-laite { grid-column: 1; margin-top: 18px; max-width: 34em; font-size: 15px; color: var(--teksti-himmea);
  text-shadow: 0 0 8px var(--pohja), 0 0 3px var(--pohja); }
.avaus-laite a { color: var(--neon); }
.avaus-koodi { grid-column: 1; margin-top: 22px; font: 600 16px/1.4 "Chakra Petch", sans-serif; }
.avaus-koodi a { color: var(--neon); text-underline-offset: 4px; }
.avaus-koodi a:hover { color: var(--neon-2); }
.ohje-kosketus { display: none; }
@media not all and (hover: hover) { .ohje-hiiri { display: none; } .ohje-kosketus { display: block; } }
@media (prefers-reduced-motion: reduce) { .avaus-ohje { display: none; } }

.aukko {
  min-height: 44vh; display: flex; align-items: center; padding: 0 max(16px, 6vw);
  font: 700 clamp(28px, 5vw, 64px)/1.05 "Chakra Petch", sans-serif; text-transform: uppercase;
  color: var(--neon); text-shadow: 0 0 22px rgba(63, 224, 232, 0.5);
  pointer-events: none;
}
.aukko span { max-width: 16em; }
.aukko:nth-of-type(even) { justify-content: flex-end; text-align: right; color: var(--neon-2); text-shadow: 0 0 22px rgba(255, 46, 136, 0.45); }

.arkki {
  position: relative; max-width: 640px; margin: 0 max(16px, 6vw) 48px;
  padding: 36px 44px 40px; color: var(--muste); border-radius: 22px;
  background: linear-gradient(165deg, rgba(170, 215, 235, 0.14) 0%, rgba(24, 36, 46, 0.42) 38%, rgba(6, 10, 14, 0.66) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(200, 232, 244, 0.13), 0 30px 70px rgba(0, 0, 0, 0.6);
}
.arkki-oikea { margin-left: auto; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .arkki { background: rgba(10, 16, 22, 0.92); }
}
@media (pointer: coarse) {
  .arkki { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(165deg, rgba(40, 58, 70, 0.94) 0%, rgba(12, 18, 24, 0.95) 45%, rgba(6, 10, 14, 0.96) 100%); }
}
.arkki-yla {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 22px; border-bottom: 1px solid var(--lasi-viiva);
  font-size: 13px; font-weight: 600; font-stretch: 87.5%; color: var(--virka);
}
.arkki h2 { color: #fff; font-size: 34px; line-height: 1.05; font-weight: 800; font-stretch: 112.5%; margin-bottom: 16px; }
.arkki h3 { margin-top: 28px; font-size: 18px; font-weight: 700; }
.arkki p + p, .arkki table + p { margin-top: 14px; }
.arkki-pieni { font-size: 13.5px; color: var(--muste-2); border-top: 1px solid var(--lasi-viiva); padding-top: 12px; margin-top: 22px !important; }
.arkki table { width: 100%; border-collapse: collapse; font-size: 15px; }
.arkki th, .arkki td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--lasi-viiva); }
.arkki thead th { font-size: 13px; font-stretch: 87.5%; color: var(--virka); border-bottom: 1px solid var(--virka); }
.laskurivit th { width: 34%; font-weight: 600; color: var(--muste-2); }
.laskurivit .summa th, .laskurivit .summa td { font-weight: 800; font-size: 18px; border-bottom: 3px double var(--virka); color: #fff; }
.rekisteri th[scope="row"] { font-weight: 700; white-space: nowrap; }
.ohjelmat th[scope="row"] { font-family: "Share Tech Mono", monospace; font-weight: 400; }
.marginaali { font-style: italic; }

.sensuuri {
  display: inline-block; max-width: 100%; vertical-align: baseline; padding: 0 6px; margin: 2px 0;
  background: #020304; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); cursor: pointer; line-height: 1.5;
}
.sensuuri > span {
  display: block; color: var(--neon); font: 0.94em/1.5 "Share Tech Mono", monospace;
  -webkit-mask-image: radial-gradient(circle 130px at var(--rx, -999px) var(--ry, -999px), #000 35%, transparent 85%);
  mask-image: radial-gradient(circle 130px at var(--rx, -999px) var(--ry, -999px), #000 35%, transparent 85%);
}
.sensuuri.auki > span, .sensuuri:focus > span { -webkit-mask-image: none; mask-image: none; }
.sensuuri:focus { outline: 1px solid var(--neon); outline-offset: 2px; }
@media (forced-colors: active) { .sensuuri > span { -webkit-mask-image: none; mask-image: none; } }

.liite {
  position: relative; max-width: 760px; margin: 0 max(16px, 6vw) 48px; padding: 32px 40px 40px;
  background: rgba(7, 9, 12, 0.94); color: var(--teksti-neon);
  clip-path: polygon(var(--viiste) 0, 100% 0, 100% calc(100% - var(--viiste)), calc(100% - var(--viiste)) 100%, 0 100%, 0 var(--viiste));
  box-shadow: inset 0 0 0 1px rgba(63, 224, 232, 0.35);
}
.liite-oikea { margin-left: auto; }
.liite-leve { max-width: 1180px; margin-left: auto; margin-right: auto; }
.liite-yla { font-size: 14px; color: var(--neon-2); margin-bottom: 10px; }
.liite h2 { font: 700 40px/1 "Chakra Petch", sans-serif; color: var(--neon); margin-bottom: 16px; }
.liite h3 { font: 600 22px/1.2 "Chakra Petch", sans-serif; color: var(--neon); margin-top: 32px; }
.liite p + p, .liite h3 + p { margin-top: 12px; }
.liite b { font-family: "Chakra Petch", sans-serif; font-weight: 700; color: var(--neon-kirkas); }
.liite code { color: var(--halytys); }
.kartoitus { margin-top: 20px; display: grid; gap: 0; }
.kartoitus div { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 16px; padding: 10px 0; border-top: 1px solid rgba(63, 224, 232, 0.18); }
.kartoitus dt { font: 600 15px/1.6 "Chakra Petch", sans-serif; color: var(--teksti-himmea); }
.esittely { margin-top: 24px; max-width: 1000px; }
.esittely-lista .kello { --runko: rgba(63, 224, 232, 0.45); }
.esittely-lista .kello:hover, .esittely-lista .kello:focus-visible { --runko: rgba(255, 46, 136, 0.7); }
.esittely-lista p { color: var(--teksti-himmea); }
.esittely-lista b { font-size: 18px; color: var(--neon); }
.valittajat { list-style: none; padding: 0; margin-top: 20px; }
.valittajat li { padding: 14px 0; border-top: 1px solid rgba(255, 46, 136, 0.25); }
.valittajat b { display: block; font-size: 24px; color: var(--neon-2); }
.valittajat q { display: block; margin-top: 6px; font-family: "Share Tech Mono", monospace; color: var(--neon); quotes: none; }

.arkisto { list-style: none; padding: 0; margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 24px; }
.lokero { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 10px; padding: 14px 0; border-top: 1px solid rgba(63, 224, 232, 0.2); }
.lokero-nro { font: 700 22px/1.1 "Chakra Petch", sans-serif; color: var(--neon-2); }
.lokero-otsikko { font: 600 16px/1.3 "Chakra Petch", sans-serif; color: var(--neon); }
.lokero-teksti { margin-top: 4px; font-size: 14.5px; line-height: 1.5; }
.lukittu .lokero-nro { color: var(--teksti-himmea); }
.lokero-tila { font-size: 13.5px; line-height: 1.45; color: var(--teksti-himmea); }
.lokero-avaa { color: var(--neon); font-family: "Share Tech Mono", monospace; }
.lokero-avaa:hover { background: var(--neon); color: var(--pohja); }
.lokero-lomake { font-size: 14px; }
.lokero-lomake label { flex-basis: 100%; color: var(--neon); }
.lokero-lomake input { color: var(--halytys); border-color: rgba(63, 224, 232, 0.6); }
.lokero-lomake button { color: var(--neon); border-color: var(--neon); }
.lokero-lomake button:hover { background: var(--neon); color: var(--pohja); }
.lokero-virhe { color: var(--halytys); font-size: 13px; }
.tarkistaa button { opacity: 0.5; }
.avattu .lokero-nro { color: var(--halytys); }

.ominaisuudet { margin-top: 14px; padding-left: 20px; }
.tuleva { font-weight: 700; color: var(--virka); }

.ala { max-width: 760px; margin: 96px max(16px, 6vw) 0; padding: 24px 0 120px; font-size: 14px; color: var(--teksti-himmea);
  text-shadow: 0 0 6px var(--pohja), 0 0 2px var(--pohja); }
.ala p + p { margin-top: 10px; }
.ala-pieni { font-size: 12px; }

.hud {
  position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 20; width: 56px; padding: 10px 0 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: rgba(5, 7, 10, 0.9); color: var(--neon); font-size: 13px; line-height: 1.2; pointer-events: none;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: inset 0 0 0 1px rgba(63, 224, 232, 0.5);
  opacity: 0; transition: opacity 0.4s;
}
body.peli-alkoi .hud { opacity: 1; }
.hud-rivi { display: flex; flex-direction: column; align-items: center; gap: 2px; font: 700 15px/1.1 "Chakra Petch", sans-serif; }
.hud-palkki { display: flex; flex-direction: column-reverse; gap: 3px; margin: 2px 0; }
.hud-palkki i { width: 22px; height: 9px; box-shadow: inset 0 0 0 1px rgba(255, 46, 136, 0.6); }
.hud-palkki i.taynna { background: var(--neon-2); }
.hud-tila { writing-mode: vertical-rl; transform: rotate(180deg); color: var(--neon-2); min-height: 11em; white-space: nowrap; }
.hud-paikka { display: none; }
.hud.vaara { box-shadow: inset 0 0 0 1px var(--halytys); }
.hud.vaara .hud-tila, .hud.vaara .hud-arvo { color: var(--halytys); }
.ice-kytkin {
  position: fixed; right: 14px; bottom: 16px; z-index: 20; padding: 8px 10px; cursor: pointer;
  background: rgba(5, 7, 10, 0.9); color: var(--neon); border: 1px solid rgba(63, 224, 232, 0.5); font-size: 13px;
}
.ice-kytkin[aria-pressed="false"] { color: var(--teksti-himmea); }
body.ice-pois .hud { display: none; }
@media (prefers-reduced-motion: reduce) { .hud, .ice-kytkin { display: none; } }

.kauppa {
  position: fixed; right: 14px; top: 14px; z-index: 25; margin: 0; padding: 9px 16px 10px;
  font: 13px/1.2 "Share Tech Mono", monospace; color: var(--neon); text-decoration: none;
  background: rgba(5, 7, 10, 0.9); box-shadow: inset 0 0 0 1px rgba(63, 224, 232, 0.55);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.kauppa span { color: var(--teksti-himmea); }
.kauppa b { font: 700 15px/1.2 "Chakra Petch", sans-serif; color: var(--neon-kirkas); }
a.kauppa:hover { background: var(--neon); color: var(--pohja); }
a.kauppa:hover b { color: var(--pohja); }

.flatline { position: fixed; inset: 0; z-index: 40; display: none; align-items: flex-start; justify-content: center;
  padding-top: 14px; pointer-events: none; box-shadow: inset 0 0 120px rgba(255, 46, 136, 0.55); }
.flatline p { position: relative; padding: 6px 14px; background: rgba(5, 7, 10, 0.92); font: 700 clamp(16px, 2vw, 22px)/1 "Chakra Petch", sans-serif; color: #fff; }
.flatline p::before, .flatline p::after { content: attr(data-teksti); position: absolute; inset: 0; }
.flatline p::before { color: var(--neon); transform: translateX(-4px); clip-path: inset(0 0 55% 0); }
.flatline p::after { color: var(--neon-2); transform: translateX(5px); clip-path: inset(50% 0 0 0); }
body.flatlinessa .flatline { display: flex; animation: valahdys 1.6s ease-out both; }
body.flatlinessa .flatline p { animation: viipaleet 0.35s steps(2) 4; }
@keyframes valahdys { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes viipaleet { 0% { transform: translateX(0); clip-path: inset(0); } 50% { transform: translateX(-10px); clip-path: inset(20% 0 30% 0); } 100% { transform: translateX(6px); clip-path: inset(0); } }

@media (max-width: 860px) {
  .avaus { grid-template-columns: 1fr; padding-bottom: 40px; }
  .avaus-nimi { margin-top: 6vh; }
  .avaus-kello { grid-column: 1; grid-row: auto; width: min(88vw, 400px); margin-top: 32px; }
  .arkki, .liite, .arkki-oikea, .liite-oikea { margin-left: 12px; margin-right: 12px; padding: 26px 20px 30px; }
  .arkki h2 { font-size: 27px; }
  .liite h2 { font-size: 32px; }
  .kartoitus div { grid-template-columns: 1fr; gap: 2px; }
  .nakymat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rekisteri thead { display: none; }
  .rekisteri tr, .rekisteri th, .rekisteri td { display: block; width: auto; border: 0; padding: 0; }
  .rekisteri tr { padding: 12px 0; border-bottom: 1px solid var(--lasi-viiva); }
  .rekisteri th[scope="row"] { white-space: normal; font-size: 17px; }
  .rekisteri td:last-child { color: var(--muste-2); font-size: 14px; margin-top: 4px; }
  .aukko { min-height: 34vh; }
  .hud { right: 4px; width: 40px; padding: 8px 0; font-size: 11px; }
  .hud-palkki i { width: 16px; height: 7px; }
  .hud-tila { min-height: 8em; }
  .ice-kytkin { right: 4px; bottom: 8px; padding: 6px 8px; font-size: 12px; }
  .arkki, .liite, .arkki-oikea, .liite-oikea { margin-right: 50px; }
    .kauppa { right: 6px; top: 6px; padding: 5px 9px 6px; font-size: 11px; }
  .kauppa b { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { body.flatlinessa .flatline { animation: none; } }