:root{--yo:#05070f;--yo2:#0b1024;--kortti:rgba(14,19,40,.92);--teksti:#e8ecf7;--himmea:#8e98b8;--kulta:#f2c14e;--liekki:#ff8a3d;--raja:rgba(156,200,255,.16);--vihrea:#3ddc84;--punainen:#ff5d5d;--keltainen:#f2c14e}
*{box-sizing:border-box}
html{background:var(--yo)}
body{margin:0;min-height:100vh;color:var(--teksti);font:15px/1.45 Inter,system-ui,sans-serif;background:radial-gradient(ellipse at top,#16204a 0%,var(--yo2) 45%,var(--yo) 100%) fixed;padding-bottom:96px}
button,input,select,textarea{font:inherit;color:inherit}
.ylapalkki{display:flex;align-items:center;gap:10px;padding:14px 16px 6px;padding-top:max(14px,env(safe-area-inset-top))}
.brand{font-family:Cinzel,serif;font-weight:700;letter-spacing:.1em;font-size:18px;color:var(--teksti);text-decoration:none}
.brand .x{color:var(--kulta);text-shadow:0 0 12px var(--kulta)}
.tila{margin-left:auto;font-size:12px;color:var(--himmea);border:1px solid var(--raja);border-radius:20px;padding:3px 10px}
.tila.demo{color:var(--keltainen);border-color:rgba(242,193,78,.4)}
.valilehdet{position:sticky;top:0;z-index:3;display:flex;gap:4px;overflow-x:auto;padding:8px 12px;background:linear-gradient(var(--yo) 70%,transparent)}
.valilehdet button{flex:none;border:1px solid var(--raja);background:rgba(255,255,255,.03);border-radius:20px;padding:7px 13px;cursor:pointer;font-size:14px}
.valilehdet button.aktiivinen{border-color:var(--kulta);color:var(--kulta);background:rgba(242,193,78,.08)}
.valilehdet b{background:var(--liekki);color:#000;border-radius:10px;padding:0 6px;font-size:12px;margin-left:4px}
.valilehdet b:empty{display:none}
main{max-width:860px;margin:0 auto;padding:4px 14px 20px}
h2{font-family:Cinzel,serif;letter-spacing:.08em;font-size:19px;margin:18px 0 8px}
h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--himmea);margin:18px 0 8px}
.vaihe-otsikko{display:flex;align-items:center;gap:8px;margin:16px 0 6px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--himmea)}
.vaihe-otsikko .lkm{color:var(--kulta)}
.kortti{display:flex;gap:12px;align-items:center;background:var(--kortti);border:1px solid var(--raja);border-radius:14px;padding:12px 14px;margin:8px 0;cursor:pointer;width:100%;text-align:left}
.kortti:hover{border-color:rgba(242,193,78,.45)}
.kortti .nimi{font-weight:600}
.kortti .ala{color:var(--himmea);font-size:13px}
.kortti .oikea{margin-left:auto;text-align:right;font-size:12px;color:var(--himmea);white-space:nowrap}
.kortti.seisoo{opacity:.62}
.kortti.seisoo2{opacity:.5;border-color:rgba(255,93,93,.5)}
.myoh{color:var(--punainen)}
.pian{color:var(--keltainen)}
/* Soihtu-ikoni */
.soihtu{width:30px;height:40px;flex:none;position:relative}
.soihtu svg{width:100%;height:100%;overflow:visible}
.soihtu .lie{transform-origin:15px 16px;animation:lepatus 2.4s ease-in-out infinite}
.soihtu.vilkkuu .lie{animation:vilkku 1.2s ease-in-out infinite}
.soihtu.myohassa .lie{animation:vilkku .55s ease-in-out infinite}
.soihtu.h1{filter:saturate(.8) brightness(.85)}.soihtu.h2{filter:saturate(.5) brightness(.6)}.soihtu.h3{filter:saturate(.25) brightness(.45)}.soihtu.h4{filter:grayscale(1) brightness(.35)}
@keyframes lepatus{0%,100%{transform:scale(1,1)}50%{transform:scale(.94,1.06)}}
@keyframes vilkku{0%,100%{opacity:1;filter:drop-shadow(0 0 6px #ffb347)}50%{opacity:.25;filter:none}}
@media (prefers-reduced-motion:reduce){.soihtu .lie{animation:none!important}.soihtu.vilkkuu .lie,.soihtu.myohassa .lie{outline:2px solid var(--keltainen);border-radius:50%}}
/* Napit ja lomakkeet */
.nappi{border:1px solid var(--raja);background:rgba(255,255,255,.04);border-radius:12px;padding:9px 14px;cursor:pointer}
.nappi:hover{border-color:var(--kulta)}
.nappi.paa{background:linear-gradient(#f6cf63,#e0a63a);color:#1b1305;border:0;font-weight:600}
.nappi.vaara{border-color:rgba(255,93,93,.5);color:#ffb0b0}
.rivi{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.fab{position:fixed;right:18px;bottom:max(18px,env(safe-area-inset-bottom));z-index:4;border:0;border-radius:28px;padding:15px 20px;font-weight:700;background:linear-gradient(#ffb25a,#ff7a2e);color:#1b0b00;box-shadow:0 10px 30px rgba(255,122,46,.45);cursor:pointer}
dialog{border:1px solid var(--raja);border-radius:18px;background:#0d1330;color:var(--teksti);width:min(560px,calc(100vw - 20px));max-height:calc(100vh - 30px);padding:18px}
dialog::backdrop{background:rgba(0,0,0,.6)}
label{display:block;font-size:13px;color:var(--himmea);margin:10px 0 4px}
input,select,textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--raja);background:rgba(255,255,255,.05);font-size:16px}
textarea{min-height:70px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--kulta)}
.kaksi{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.virhe{color:var(--punainen);font-size:13px;min-height:18px;margin-top:8px}
/* Soihdun varsi */
.varsi-otsikko{display:flex;gap:14px;align-items:center}
.varsi-otsikko .soihtu{width:44px;height:60px}
.tieto{display:grid;grid-template-columns:150px 1fr;gap:4px 12px;font-size:14px}
.tieto dt{color:var(--himmea)}
.tieto dd{margin:0}
.lista{list-style:none;margin:0;padding:0}
.lista li{border-left:2px solid var(--raja);padding:6px 0 6px 12px;margin:6px 0;font-size:14px}
.lista li small{color:var(--himmea)}
.polkupalkki{display:flex;gap:4px;margin:12px 0;flex-wrap:wrap}
.polkupalkki span{flex:1;min-width:58px;text-align:center;font-size:11px;padding:6px 2px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--raja);color:var(--himmea)}
.polkupalkki span.ok{color:var(--kulta);border-color:rgba(242,193,78,.4)}
.polkupalkki span.nyt{background:rgba(242,193,78,.16);color:#fff;border-color:var(--kulta)}
.kate{font-weight:700;padding:2px 8px;border-radius:8px}
.kate.punainen{background:rgba(255,93,93,.18);color:#ffb0b0}.kate.keltainen{background:rgba(242,193,78,.16);color:var(--keltainen)}.kate.vihrea{background:rgba(61,220,132,.15);color:var(--vihrea)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:6px 6px;border-bottom:1px solid var(--raja);text-align:left}
th{color:var(--himmea);font-weight:500}
.luvut{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:10px 0}
.luku{background:var(--kortti);border:1px solid var(--raja);border-radius:14px;padding:12px}
.luku b{display:block;font-size:24px;font-family:Cinzel,serif;color:var(--kulta)}
.luku span{font-size:12px;color:var(--himmea)}
.ohje ol{padding-left:20px}.ohje li{margin:6px 0}
.kultainen{border:1px solid rgba(242,193,78,.4);border-radius:14px;padding:14px;background:rgba(242,193,78,.06);font-family:Cinzel,serif;text-align:center;margin:16px 0}
#ilmoitus{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:9;background:#1a2350;border:1px solid var(--kulta);border-radius:12px;padding:10px 16px;max-width:calc(100vw - 30px)}
.tyhja{color:var(--himmea);font-style:italic}
@media (max-width:520px){.tieto{grid-template-columns:1fr}.tieto dt{margin-top:6px}.kaksi{grid-template-columns:1fr}}