:root {
  --lasi: #07101b;
  --fosfori: #9CC8FF;
  --fosfori-kirkas: #E6F2FF;
  --varoitus: #FFB238;
  --teksti: #d3deec;
  --himmea: #8797ae;
}
html { background: var(--lasi); color-scheme: dark; }
body.cg-colonial { color: var(--teksti); font: 400 16px/1.6 "IBM Plex Sans", system-ui, sans-serif; }
:focus-visible { outline: 2px solid var(--varoitus); outline-offset: 3px; }
code, pre, .kilpi, .kytkimet, .muistio { font-family: "IBM Plex Mono", ui-monospace, monospace; }

.crt {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(156, 200, 255, 0.035) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
  transition: box-shadow 0.2s;
}
body.murto .crt { box-shadow: inset 0 0 140px rgba(255, 178, 56, 0.55); }
.kilpi { transition: opacity 0.3s, transform 0.3s; }
body.kello-nakyy .kilpi { opacity: 0; transform: translateY(10px); }

.avaus {
  min-height: 100vh; padding: 32px max(16px, 6vw) 64px;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 4vw; align-content: start;
}
.avaus-julkaisija { grid-column: 1 / -1; font: 14px "Share Tech Mono", monospace; color: var(--himmea); }
.avaus-julkaisija a { color: inherit; }
.avaus-nimi {
  grid-column: 1; margin-top: 12vh;
  font: 700 clamp(56px, 10vw, 156px)/0.9 "Chakra Petch", sans-serif; color: var(--fosfori-kirkas);
  text-shadow: 0 0 24px rgba(156, 200, 255, 0.55), 0 0 2px var(--fosfori);
}
.avaus-lause { grid-column: 1; margin-top: 28px; font: 600 clamp(20px, 2.4vw, 30px)/1.25 "Chakra Petch", sans-serif; color: var(--fosfori); }
.avaus-kello { grid-column: 2; grid-row: 2 / span 4; width: min(100%, 540px); margin-top: 6vh; justify-self: center;
  --runko: rgba(156, 200, 255, 0.5); }
.avaus-kello img { filter: drop-shadow(0 0 30px rgba(156, 200, 255, 0.2)); }
.avaus-teksti { grid-column: 1; max-width: 34em; margin-top: 28px; font-size: 18px; text-shadow: 0 0 8px var(--lasi), 0 0 3px var(--lasi); }
.avaus-ohje { grid-column: 1; margin-top: 16px; max-width: 34em; font: 15px/1.5 "Share Tech Mono", monospace; color: var(--varoitus); }
.avaus-laite { grid-column: 1; margin-top: 18px; max-width: 34em; font-size: 15px; color: var(--himmea);
  text-shadow: 0 0 8px var(--lasi), 0 0 3px var(--lasi); }
.avaus-laite a { color: var(--fosfori); }
.avaus-koodi { grid-column: 1; margin-top: 22px; font: 600 16px/1.4 "Chakra Petch", sans-serif; }
.avaus-koodi a { color: var(--fosfori-kirkas); text-underline-offset: 4px; }
.avaus-koodi a:hover { color: var(--varoitus); }
.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: 46vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 16px;
  font: 700 clamp(26px, 4.6vw, 58px)/1.1 "Chakra Petch", sans-serif; text-transform: uppercase;
  color: var(--fosfori-kirkas); text-shadow: 0 0 22px rgba(156, 200, 255, 0.55); pointer-events: none;
}
.aukko span { max-width: 15em; }

.kansio { max-width: 820px; margin: 0 auto; padding: 0 28px; }
.arkki {
  --muste: #cfe0f7; --muste-2: #7f93ad; --crg: var(--fosfori-kirkas); --viiva: rgba(156, 200, 255, 0.22);
  position: relative; margin: 0 0 72px; padding: 34px 42px 40px;
  color: var(--muste); font: 400 15px/1.65 "IBM Plex Mono", ui-monospace, monospace;
  text-shadow: 0 0 6px rgba(156, 200, 255, 0.42);
  border-radius: 30px / 26px;
  background: radial-gradient(ellipse at 50% 38%, #0e2036 0%, #08121f 58%, #03070d 100%);
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, 0.8), inset 0 0 3px rgba(156, 200, 255, 0.35),
    0 0 0 16px #141a23, 0 0 0 17px #283141, 0 0 0 18px #0b0f15, 0 34px 70px rgba(0, 0, 0, 0.65);
}
.arkki::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(156, 200, 255, 0.05) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, 0.06), transparent 45%);
}
.arkki::before {
  content: "CRG TERMINAL \00B7 HX-217"; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%);
  padding: 0 10px 0 22px; font: 10px/14px "Share Tech Mono", monospace; letter-spacing: 0.08em; color: #8291a5;
  background: radial-gradient(circle at 8px 50%, var(--varoitus) 2.5px, transparent 3.5px), #141a23; text-shadow: none;
  white-space: nowrap;
}
.valilehti { margin: -10px 0 18px; font: 13px/1.4 "Share Tech Mono", monospace; color: var(--muste-2); text-transform: uppercase; }
.valilehti::before { content: "> CRG/ORIENTATION/"; }
.arkki h2 {
  display: inline-block; margin-bottom: 20px; padding: 2px 12px;
  font: 400 28px/1.25 "Share Tech Mono", monospace; text-transform: uppercase;
  background: var(--fosfori); color: #050b14; text-shadow: none; box-shadow: 0 0 14px rgba(156, 200, 255, 0.45);
}
.arkki h3 { margin-top: 28px; font-size: 15px; font-weight: 500; text-transform: uppercase; color: var(--crg); }
.arkki h3::before { content: "## "; color: var(--muste-2); }
.arkki p + p, .arkki table + p, .arkki h3 + p, .arkki pre + p { margin-top: 14px; }
.arkki > p:last-child::after { content: "\2588"; margin-left: 6px; color: var(--fosfori); animation: kursori 1.1s steps(1) infinite; }
@keyframes kursori { 50% { opacity: 0; } }
.arkki-pieni { font-size: 13px; color: var(--muste-2); border-top: 1px dashed var(--viiva); padding-top: 12px; margin-top: 24px !important; }
.arkki table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14.5px; }
.arkki th, .arkki td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-bottom: 1px dashed var(--viiva); }
.arkki th { width: 36%; font-weight: 400; color: var(--muste-2); }
.vuorot th { font-family: "Share Tech Mono", monospace; color: var(--crg); width: 26%; }
.arkki code { font-size: 0.95em; background: rgba(156, 200, 255, 0.12); padding: 1px 4px; color: var(--crg); }

.kansi { padding-top: 44px; padding-bottom: 48px; }
.arkki-tunnus { display: block; font: 13px/1.4 "Share Tech Mono", monospace; text-transform: uppercase; color: var(--muste-2); border-bottom: 1px dashed var(--viiva); padding-bottom: 10px; margin-bottom: 24px; }
.kansi h2 { font-size: 36px; }
.kyltti { margin-top: 22px; padding: 16px 20px; max-width: 480px; border: 1px solid rgba(156, 200, 255, 0.45); font-family: "Share Tech Mono", monospace; }
.kyltti div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; padding: 2px 0; }
.kyltti dt { color: var(--muste-2); text-transform: uppercase; }
.kyltti dd { color: var(--fosfori-kirkas); }
.leima {
  display: inline-block; margin-top: 22px; padding: 6px 14px; border: 2px solid var(--varoitus); color: var(--varoitus);
  font: 16px/1.2 "Share Tech Mono", monospace; text-transform: uppercase; text-shadow: 0 0 8px rgba(255, 178, 56, 0.55);
  animation: varoitus 2.4s steps(1) infinite;
}
@keyframes varoitus { 85% { background: var(--varoitus); color: #050b14; text-shadow: none; } }

.muistio-otsake { display: grid; gap: 2px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px dashed var(--viiva); color: var(--muste-2); }
.muistio-otsake span:first-child { font-size: 17px; color: var(--crg); margin-bottom: 6px; }
.muistio-allekirjoitus { margin-top: 22px !important; }

.ohjeet { margin-top: 18px; padding-left: 26px; }
.ohjeet li + li { margin-top: 12px; }
.ohjeet b { color: var(--crg); font-weight: 500; }
.esittely-lista .kello { --runko: rgba(156, 200, 255, 0.45); }
.esittely-lista .kello:hover, .esittely-lista .kello:focus-visible { --runko: rgba(255, 178, 56, 0.7); }
.esittely-lista p { font-size: 14px; color: var(--muste-2); }
.esittely-lista b { color: var(--crg); font-weight: 500; }
.raportti {
  margin-top: 14px; padding: 16px 20px; border: 1px solid var(--viiva); background: rgba(0, 0, 0, 0.3); color: var(--fosfori-kirkas);
  font: 15px/1.6 "Share Tech Mono", monospace; white-space: pre-wrap;
}

.arkisto { list-style: none; padding: 0; margin-top: 22px; }
.lokero { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px dashed var(--viiva); }
.lokero-nro { font: 400 15px/1.5 "Share Tech Mono", monospace; color: var(--muste-2); }
.lokero-otsikko { margin-top: 0 !important; font: 500 13px/1.5 "IBM Plex Mono", monospace; color: var(--crg); }
.lokero-otsikko::before { content: none !important; }
.lokero-teksti { font: 400 15px/1.5 "IBM Plex Mono", monospace; }
.lokero-tila { font-size: 13.5px; color: var(--muste-2); }
.lukittu .lokero-tila::before { content: "RESTRICTED"; display: inline-block; margin-right: 10px; padding: 0 6px; background: var(--varoitus); color: #050b14; text-shadow: none; font: 12px/1.6 "Share Tech Mono", monospace; }
.lokero-avaa { color: var(--fosfori-kirkas); font-family: "Share Tech Mono", monospace; text-shadow: none; }
.lokero-avaa:hover { background: var(--fosfori); color: #050b14; }
.lokero-lomake { font-size: 14px; }
.lokero-lomake label { flex-basis: 100%; color: var(--crg); }
.lokero-lomake input { font-family: "IBM Plex Mono", monospace; background: rgba(0, 0, 0, 0.35); color: var(--varoitus); border-color: rgba(156, 200, 255, 0.5); }
.lokero-lomake button { color: #050b14; background: var(--fosfori); border-color: var(--fosfori); text-shadow: none; }
.lokero-virhe { color: var(--varoitus); font-size: 13px; }
.tarkistaa button { opacity: 0.5; }
.avattu .lokero-nro { color: var(--varoitus); }

.ruksit { list-style: none; padding: 0; margin-top: 12px; }
.ruksit li { position: relative; padding: 6px 0 6px 40px; border-bottom: 1px dashed var(--viiva); }
.ruksit li::before { content: "[X]"; position: absolute; left: 0; top: 6px; color: var(--crg); }
.tila { margin-top: 20px !important; }
.tila span { display: inline-block; margin-right: 10px; padding: 0 8px; background: var(--varoitus); color: #050b14; text-shadow: none; font: 13px/1.7 "Share Tech Mono", monospace; }
@media (prefers-reduced-motion: reduce) { .arkki > p:last-child::after, .leima { animation: none; } }

.ala { max-width: 780px; margin: 96px auto 0; padding: 24px 16px 140px; font-size: 14px; color: var(--himmea); text-shadow: 0 0 6px var(--lasi); }
.ala p + p { margin-top: 10px; }
.ala-pieni { font-size: 12px; }

.kilpi {
  position: fixed; left: 16px; bottom: 16px; z-index: 20; min-width: 240px; padding: 12px 18px 12px;
  background: linear-gradient(180deg, #1d2534, #121823); color: var(--fosfori); border-radius: 4px; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 14px rgba(0, 0, 0, 0.5);
  font-family: "Share Tech Mono", monospace; font-size: 13px; line-height: 1.4;
}
.kilpi-etaisyys { font: 700 26px/1.1 "Chakra Petch", sans-serif; color: var(--fosfori-kirkas); text-shadow: 0 0 12px rgba(156, 200, 255, 0.6); }
.kilpi-tapahtuma { min-height: 1.4em; color: var(--varoitus); }
.kilpi-mittari { display: flex; align-items: center; gap: 3px; margin: 4px 0; color: var(--himmea); }
.kilpi-mittari span { margin-right: 8px; }
.kilpi-mittari i { width: 12px; height: 8px; box-shadow: inset 0 0 0 1px rgba(156, 200, 255, 0.5); }
.kilpi-mittari i.taynna { background: var(--varoitus); box-shadow: none; }
.kilpi-laskurit { color: var(--himmea); }
.kilpi.lahella .kilpi-etaisyys { color: var(--varoitus); text-shadow: 0 0 12px rgba(255, 178, 56, 0.6); }
.kytkimet { position: fixed; right: 16px; bottom: 16px; z-index: 20; display: flex; gap: 8px; margin: 0; }
.kytkimet button {
  padding: 8px 12px; cursor: pointer; background: rgba(7, 16, 27, 0.9); color: var(--fosfori);
  border: 1px solid rgba(156, 200, 255, 0.5); font: 13px "Share Tech Mono", monospace;
}
.kytkimet button[aria-pressed="false"] { color: var(--himmea); }
body.tutka-pois .kilpi, body.tutka-pois .aani-kytkin { display: none; }
@media (prefers-reduced-motion: reduce) { .kilpi, .kytkimet { display: none; } }

.kauppa {
  position: fixed; right: 16px; top: 16px; z-index: 25; margin: 0; padding: 9px 16px 10px; border-radius: 4px;
  font: 13px/1.2 "Share Tech Mono", monospace; color: var(--fosfori); text-decoration: none;
  background: linear-gradient(180deg, #1d2534, #121823);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 14px rgba(0, 0, 0, 0.5);
}
.kauppa span { color: var(--himmea); }
.kauppa b { font: 700 15px/1.2 "Chakra Petch", sans-serif; color: var(--fosfori-kirkas); }
a.kauppa:hover { box-shadow: inset 0 0 0 1px var(--varoitus), 0 4px 14px rgba(0, 0, 0, 0.5); }

@media (max-width: 860px) {
  .avaus { grid-template-columns: 1fr; padding-bottom: 32px; }
  .avaus-nimi { margin-top: 6vh; }
  .avaus-kello { grid-column: 1; grid-row: auto; width: min(88vw, 400px); margin-top: 32px; }
  .kansio { padding: 0 14px; }
  .arkki { padding: 26px 18px 30px; margin-bottom: 52px; border-radius: 20px / 18px;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8), inset 0 0 3px rgba(156, 200, 255, 0.35),
      0 0 0 9px #141a23, 0 0 0 10px #283141, 0 20px 40px rgba(0, 0, 0, 0.6); }
  .arkki::before { bottom: -10px; font-size: 9px; line-height: 10px; }
  .arkki h2 { font-size: 22px; }
  .kansi h2 { font-size: 26px; }
  .kyltti { padding: 12px 14px; }
  .kyltti div { grid-template-columns: 1fr; gap: 0; padding: 4px 0; }
  .arkki th { width: 40%; }
  .aukko { min-height: 34vh; }
  .kilpi { left: 6px; bottom: 6px; min-width: 0; padding: 6px 10px; font-size: 11px; }
  .kilpi-etaisyys { font-size: 16px; }
  .kilpi-tapahtuma:empty, .kilpi-laskurit { display: none; }
  .kilpi-mittari { margin: 2px 0 0; }
  .kilpi-mittari i { width: 8px; height: 6px; }
  .kytkimet { right: 6px; bottom: 6px; gap: 4px; }
  .kytkimet button { padding: 5px 7px; font-size: 11px; }
  .kauppa { right: 6px; top: 6px; padding: 5px 9px 6px; font-size: 11px; }
  .kauppa b { font-size: 12px; }
}

.pohja {
  position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
  perspective: 2200px; perspective-origin: 50% 0%;
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 38%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 4%, #000 38%, #000 100%);
}
.pohja-taso {
  position: absolute; left: 50%; top: 4vh; width: 2400px; height: 3600px; margin-left: -1200px;
  transform-origin: 50% 0; transform: rotateX(36deg) translateY(var(--pohja-y, 0px));
  transform-style: preserve-3d; color: var(--fosfori);
}
.pohja-taso > .pohja-kartta { opacity: 0.3; }
.pohja-taso > .pohja-ala { opacity: 0.13; transform: translateZ(-190px); }
.pohja-taso > .pohja-putket { opacity: 0.09; transform: translateZ(-380px); }
.pohja-kartta .putki { fill: none; stroke: currentColor; stroke-width: 2; }
.pohja-kartta .laippa { stroke: currentColor; stroke-width: 3; }
.pohja-kartta .venttiili { fill: none; stroke: currentColor; stroke-width: 2; }
.pohja-kartta .seina { fill: none; stroke: currentColor; stroke-width: 3; stroke-linejoin: miter; }
.pohja-taso > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pohja-kartta .k { stroke: currentColor; stroke-width: 3; }
.pohja-kartta .h { stroke: currentColor; stroke-width: 2; fill: none; }
.pohja-kartta .s { stroke: currentColor; stroke-width: 1.5; opacity: 0.8; }
.pohja-kartta .ohut { stroke: currentColor; stroke-width: 1; fill: none; }
.pohja-kartta .ovi { stroke: currentColor; stroke-width: 2; stroke-dasharray: 14 10; fill: none; }
.pohja-kartta .aita { fill: none; stroke: currentColor; stroke-width: 3; stroke-dasharray: 28 12 4 12; opacity: 0.7; }
.pohja-kartta polyline.k, .pohja-kartta path.k { fill: none; }
.pohja-kartta .kanava { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 10 8; opacity: 0.75; }
.pohja-kartta .toimisto { fill: currentColor; fill-opacity: 0.25; stroke: currentColor; stroke-width: 3; }
.pohja-kartta .t { fill: currentColor; font: 22px "IBM Plex Sans", sans-serif; }
.pohja-kartta .iso { font-size: 40px; font-weight: 600; opacity: 0.5; }
.pohja-kartta .pieni { font-size: 16px; opacity: 0.6; }
#havainto .h0 { stop-color: #E6F2FF; stop-opacity: 1; }
#havainto .h1 { stop-color: #9CC8FF; stop-opacity: 0.55; }
#havainto .h2 { stop-color: #9CC8FF; stop-opacity: 0; }
#havainto-lahella .l0 { stop-color: #FFE6B8; stop-opacity: 1; }
#havainto-lahella .l1 { stop-color: #FFB238; stop-opacity: 0.55; }
#havainto-lahella .l2 { stop-color: #FFB238; stop-opacity: 0; }

.kaynnistys {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: #03070d; transition: opacity 0.35s;
}
.kaynnistys[hidden] { display: none; }
.kaynnistys.sammuu { opacity: 0; }
.kaynnistys pre {
  min-width: min(34em, 90vw); min-height: 13em; margin: 0; color: var(--fosfori-kirkas);
  font: 16px/1.6 "Share Tech Mono", monospace; text-shadow: 0 0 8px rgba(156, 200, 255, 0.6); white-space: pre-wrap;
}
.kaynnistys pre::after { content: "\2588"; animation: kursori 0.9s steps(1) infinite; }

.arkki.sammunut > * { opacity: 0; }
.arkki.kaynnistyy::after { animation: putki 0.6s ease-out both; }
.arkki.kaynnistyy > * { animation: kirjoitus 0.42s steps(16) both; animation-delay: calc(0.32s + var(--i, 0) * 0.07s); }
@keyframes putki {
  0% { transform: scaleY(0.004); background-color: rgba(220, 238, 255, 0.9); }
  30% { transform: scaleY(0.004); background-color: rgba(220, 238, 255, 0.9); }
  65% { transform: scaleY(1); background-color: rgba(200, 228, 255, 0.18); }
  100% { transform: scaleY(1); background-color: transparent; }
}
@keyframes kirjoitus { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.arkki.nykays, .avaus-kello.nykays { transform: translateX(1.5px); }
.arkki.nykays::after { background-position: 0 1px, 0 0; }

@media (prefers-reduced-motion: reduce) {
  .kaynnistys { display: none; }
  .arkki.sammunut > * { opacity: 1; }
  .arkki.kaynnistyy::after, .arkki.kaynnistyy > * { animation: none; }
}