:root{
  --pohja:#141b14; --pohja2:#0d130d;
  --paneeli:rgba(22,30,22,.92);
  --reuna:rgba(210,230,200,.14);
  --teksti:#e8f0e2; --himmea:#9aab96;
  --vilja:#e0c264; --lehti:#7fc06a; --maa:#b58a5c;
  --hyva:#7fd08a; --paha:#e08070; --huomio:#f0c463;
  --korkeus:14px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;}
body{
  font-family:"Helvetica Neue",Inter,system-ui,-apple-system,sans-serif;
  color:var(--teksti);background:var(--pohja);
  touch-action:none;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
.piilossa{display:none !important;}

#kartta{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;}

/* ---------------------------------------------------------- yläpalkki */
#ylapalkki{
  position:fixed;left:0;right:0;top:0;z-index:10;
  display:flex;align-items:center;gap:6px;
  padding:calc(6px + env(safe-area-inset-top)) 8px 6px;
  background:linear-gradient(180deg,rgba(10,16,10,.92),rgba(10,16,10,.55) 70%,transparent);
}
.ikoni{
  width:32px;height:32px;flex:0 0 auto;border-radius:9px;display:inline-flex;align-items:center;
  justify-content:center;font-size:17px;text-decoration:none;color:var(--teksti);
  background:rgba(232,240,226,.09);border:1px solid var(--reuna);
}
.ikoni:active{transform:scale(.92);}
.mittari{
  display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:10px;
  background:rgba(20,28,20,.62);border:1px solid var(--reuna);
  font-size:12px;white-space:nowrap;backdrop-filter:blur(6px);
}
.mittari b{font-weight:700;font-variant-numeric:tabular-nums;}
.mittari.raha b{color:var(--vilja);}
.mittari.aika{flex:0 1 auto;overflow:hidden;}
.mittari.saa{display:none;}
@media(min-width:430px){ .mittari.saa{display:flex;} }

.nopeudet{margin-left:auto;display:flex;gap:3px;background:rgba(20,28,20,.62);
  border:1px solid var(--reuna);border-radius:10px;padding:2px;}
.nopeudet button{width:30px;height:28px;border-radius:8px;font-size:11px;font-weight:700;color:var(--himmea);}
.nopeudet button.valittu{background:var(--lehti);color:#0e1a0e;}

/* ---------------------------------------------------------- resurssit */
#resurssit{
  position:fixed;left:0;right:0;top:calc(46px + env(safe-area-inset-top));z-index:9;
  display:flex;gap:5px;padding:0 8px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;touch-action:pan-x;
}
#resurssit::-webkit-scrollbar{display:none;}
.res{
  display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:9px;flex:0 0 auto;
  background:rgba(20,28,20,.7);border:1px solid var(--reuna);font-size:11.5px;
  font-variant-numeric:tabular-nums;
}
.res b{font-weight:700;}
.res.vahenee b{color:var(--paha);}
.res.taynna{border-color:rgba(224,128,112,.5);}

#varoitukset{
  position:fixed;left:8px;top:calc(80px + env(safe-area-inset-top));z-index:9;
  display:flex;flex-direction:column;gap:4px;pointer-events:none;
}
.varoitus{
  padding:4px 9px;border-radius:8px;font-size:11px;font-weight:600;
  background:rgba(120,40,30,.78);border:1px solid rgba(240,140,120,.4);
}
.varoitus.keltainen{background:rgba(120,95,25,.78);border-color:rgba(240,200,110,.4);}

/* ---------------------------------------------------------- ilmoitukset */
#ilmoitukset{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(84px + env(safe-area-inset-bottom));z-index:12;
  display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;width:min(420px,92vw);
}
.ilmo{
  padding:8px 14px;border-radius:12px;font-size:12.5px;font-weight:600;text-align:center;
  background:rgba(24,34,24,.94);border:1px solid var(--reuna);
  box-shadow:0 10px 24px -14px #000;
  animation:tulee .25s ease, menee .4s 3.4s ease forwards;
}
.ilmo.hyva{border-color:rgba(127,208,138,.5);color:#bdf0c4;}
.ilmo.paha{border-color:rgba(224,128,112,.5);color:#f5c6bd;}
@keyframes tulee{from{opacity:0;transform:translateY(12px) scale(.96);}to{opacity:1;}}
@keyframes menee{to{opacity:0;transform:translateY(-8px);}}

/* ---------------------------------------------------------- tilarivi */
#tilarivi{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(66px + env(safe-area-inset-bottom));z-index:11;
  padding:5px 12px;border-radius:999px;font-size:11.5px;
  background:rgba(24,34,24,.9);border:1px solid var(--reuna);
  max-width:92vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:none;
}
#tilarivi.nakyy{display:block;}

/* ---------------------------------------------------------- työkalurivi */
#tyokalurivi{
  position:fixed;left:0;right:0;bottom:0;z-index:12;
  display:flex;gap:4px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(10,16,10,.96),rgba(10,16,10,.78) 60%,transparent);
}
#tyokalurivi button{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:7px 2px;border-radius:12px;font-size:9.5px;letter-spacing:.03em;
  color:var(--himmea);background:rgba(24,34,24,.8);border:1px solid var(--reuna);
}
#tyokalurivi button i{font-style:normal;font-size:19px;line-height:1;}
#tyokalurivi button.valittu{background:var(--lehti);color:#0e1a0e;border-color:transparent;font-weight:700;}
#tyokalurivi button:active{transform:scale(.95);}

/* ---------------------------------------------------------- arkki */
#arkkitausta{position:fixed;inset:0;z-index:14;background:rgba(4,8,4,.5);}
#arkki{
  position:fixed;left:0;right:0;bottom:0;z-index:15;
  max-height:76dvh;display:flex;flex-direction:column;
  background:var(--paneeli);backdrop-filter:blur(14px);
  border-top:1px solid var(--reuna);border-radius:20px 20px 0 0;
  padding:6px 0 calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -14px 40px -18px #000;
  animation:nouse .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes nouse{from{transform:translateY(100%);}}
.kahva{width:38px;height:4px;border-radius:99px;background:rgba(220,235,215,.28);margin:2px auto 6px;}
.arkkiotsikko{display:flex;align-items:center;gap:8px;padding:0 16px 8px;}
.arkkiotsikko h2{flex:1;font-size:15px;font-weight:800;letter-spacing:.02em;}
#arkkiKiinni{width:30px;height:30px;border-radius:9px;background:rgba(232,240,226,.09);
  border:1px solid var(--reuna);font-size:14px;}
#arkkiSisalto{overflow-y:auto;padding:0 14px 6px;-webkit-overflow-scrolling:touch;touch-action:pan-y;}

/* ---------------------------------------------------------- arkin sisältö */
.ruudukko{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px;}
.kortti{
  position:relative;display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  padding:9px 9px 8px;border-radius:13px;text-align:left;
  background:rgba(38,50,36,.7);border:1px solid var(--reuna);
}
.kortti:active{transform:scale(.97);}
.kortti.valittu{border-color:var(--lehti);background:rgba(60,90,55,.7);}
.kortti.eiVara{opacity:.42;}
.kortti .paa{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;width:100%;}
.kortti .paa i{font-style:normal;font-size:17px;}
.kortti .paa b{flex:1;min-width:0;font-weight:700;line-height:1.2;overflow-wrap:anywhere;}
/* Sprite-kuvake: rajataan mallin kohdalle, koska kuvassa on ilmaa ympärillä. */
.kuvake{width:42px;height:38px;flex:0 0 auto;overflow:hidden;position:relative;border-radius:8px;
  background:linear-gradient(180deg,rgba(120,160,100,.30),rgba(70,100,60,.30));}
.kuvake img{position:absolute;width:84px;height:84px;left:-21px;top:-26px;}
.kuvake.kasvi img{left:-21px;top:-34px;}
.kortti .hinta{font-size:10.5px;color:var(--vilja);font-variant-numeric:tabular-nums;}
.kortti .selite{font-size:10px;color:var(--himmea);line-height:1.35;}

.rivi{display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid rgba(210,230,200,.07);}
.rivi:last-child{border-bottom:none;}
.rivi .nimi{flex:1;font-size:12.5px;display:flex;align-items:center;gap:6px;}
.rivi .maara{font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--himmea);min-width:52px;text-align:right;}
.rivi .arvo{font-size:11.5px;color:var(--vilja);min-width:56px;text-align:right;font-variant-numeric:tabular-nums;}
.nappi{
  padding:7px 12px;border-radius:10px;font-size:11.5px;font-weight:700;
  background:rgba(232,240,226,.1);border:1px solid var(--reuna);
}
.nappi:active{transform:scale(.95);}
.nappi.paa{background:var(--lehti);color:#0e1a0e;border-color:transparent;}
.nappi.vaara{background:rgba(180,70,55,.55);border-color:rgba(240,140,120,.35);}
.nappi.pieni{padding:5px 9px;font-size:11px;}
.nappi:disabled{opacity:.35;}
.napit{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.ohjeteksti{font-size:11.5px;color:var(--himmea);line-height:1.5;margin:2px 0 10px;}
h3.otsake{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--himmea);
  margin:14px 0 6px;}
h3.otsake:first-child{margin-top:2px;}
.palkki{height:6px;border-radius:99px;background:rgba(0,0,0,.35);overflow:hidden;margin-top:4px;}
.palkki i{display:block;height:100%;background:var(--lehti);}
.merkki{font-size:10px;padding:2px 6px;border-radius:6px;background:rgba(232,240,226,.1);}
.merkki.hyva{background:rgba(127,208,138,.22);color:#bdf0c4;}
.merkki.paha{background:rgba(224,128,112,.22);color:#f5c6bd;}
.tavoiterivi{display:flex;align-items:center;gap:8px;padding:7px 4px;font-size:12px;}
.tavoiterivi.tehty{color:var(--hyva);}
.tavoiterivi .pallo{width:16px;height:16px;border-radius:50%;border:2px solid var(--himmea);flex:0 0 auto;}
.tavoiterivi.tehty .pallo{background:var(--hyva);border-color:var(--hyva);}
#pikkukartta{width:100%;max-width:280px;margin:0 auto;display:block;border-radius:10px;
  border:1px solid var(--reuna);image-rendering:pixelated;}
.liuku{width:100%;accent-color:var(--lehti);margin:6px 0;}
.viestirivi{font-size:11.5px;padding:5px 4px;border-bottom:1px solid rgba(210,230,200,.06);color:var(--himmea);}
.viestirivi b{color:var(--teksti);font-weight:600;}
.viestirivi.hyva b{color:#bdf0c4;}
.viestirivi.paha b{color:#f5c6bd;}

/* ---------------------------------------------------------- aloitus */
#aloitus{
  position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  padding:20px;background:radial-gradient(ellipse 80% 50% at 50% 30%,rgba(120,170,90,.16),transparent 70%),
    linear-gradient(180deg,#16200f,#0b110b);
}
.aloituskortti{width:min(420px,100%);text-align:center;}
.aloituskortti h1{font-size:clamp(38px,12vw,62px);font-weight:900;letter-spacing:.1em;
  background:linear-gradient(100deg,#d8c064,#8ec46a 55%,#5fa8c0);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.alaotsikko{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--himmea);margin-top:6px;}
.johdanto{font-size:13px;line-height:1.6;color:#c6d4c0;margin:20px 0 22px;}
.aloitusnapit{display:flex;flex-direction:column;gap:8px;}
button.iso{padding:14px;border-radius:14px;font-size:14px;font-weight:800;letter-spacing:.04em;
  background:var(--lehti);color:#0e1a0e;}
button.iso:active{transform:scale(.97);}
#jatkaPeli{background:rgba(232,240,226,.12);color:var(--teksti);border:1px solid var(--reuna);}
.ennatysrivi{font-size:11px;color:var(--himmea);margin-top:14px;}
.ohje{margin-top:22px;text-align:left;font-size:12px;color:var(--himmea);}
.ohje summary{cursor:pointer;padding:8px 0;font-weight:700;color:var(--teksti);}
.ohje ul{margin:4px 0 0 18px;display:flex;flex-direction:column;gap:7px;line-height:1.5;}
.ohje b{color:var(--vilja);}