/* Seppo Sivilisaatio — lämmin, suomalainen 4X-käyttöliittymä. */

:root {
  --tumma: #3B2A1E;
  --puu: #7A5230;
  --vaalea: #C89B63;
  --koivu: #EEDCB4;
  --taivas: #8ECBE3;
  --jarvi: #2F7FA6;
  --metsa: #3F7A3A;
  --ruoho: #7CB342;
  --aurinko: #F5C542;
  --oranssi: #E8862A;
  --punainen: #C1440E;
  --teksti: #FFF6E5;
  --pimea: #201812;
  --paneeli: rgba(32, 24, 18, .88);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: var(--pimea); }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--teksti);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  overscroll-behavior: none;
}
button, a { font-family: inherit; }
.piilossa { display: none !important; }
#peli { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 35%, #35506a 0%, #201812 65%); }
#kanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* Yläpalkki, jonka jaettu valikko piilottaa pelisivuilla. */
#palkki {
  position: absolute; left: 0; right: 0; top: 0; height: 52px; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; background: rgba(32,24,18,.92); border-bottom: 2px solid var(--vaalea);
}
#palkki .takaisin { color: var(--koivu); text-decoration: none; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
#palkki .merkki { color: var(--vaalea); font-weight: 800; letter-spacing: .06em; }

/* Yleiset napit. */
.iso-nappi, .pikku-nappi, .hud-nappi, .hud-pikku, .valintarivi button, .tuote, .teknologia {
  border: 2px solid rgba(238,220,180,.35);
  background: linear-gradient(180deg, #8A5F37, #5D3E24);
  color: var(--teksti);
  border-radius: 8px;
  cursor: pointer;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  box-shadow: 0 3px 0 rgba(0,0,0,.35);
  transition: transform .08s ease, filter .12s ease;
  touch-action: manipulation;
}
.iso-nappi:active, .pikku-nappi:active, .hud-nappi:active, .hud-pikku:active, .tuote:active, .teknologia:active { transform: translateY(2px); filter: brightness(1.08); }
.iso-nappi { width: 100%; font-size: 17px; min-height: 52px; }
.iso-nappi.toissijainen, .pikku-nappi, .hud-pikku { background: rgba(32,24,18,.82); border-color: rgba(238,220,180,.28); }
.pikku-nappi { min-height: 40px; padding: 8px 12px; font-size: 13px; }
.hud-pikku { min-height: 40px; padding: 6px 10px; font-size: 12px; }
.iso-nappi.valittu, .pikku-nappi.valittu, .valintarivi button.valittu { background: linear-gradient(180deg, var(--aurinko), var(--oranssi)); color: #201812; border-color: var(--koivu); }
.iso-nappi.vaara, .pikku-nappi.vaara { background: linear-gradient(180deg, var(--punainen), #7e2b09); }
button:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
button:focus-visible, a:focus-visible { outline: 3px solid var(--taivas); outline-offset: 2px; }

/* Aloitusruutu. */
.ruutu {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  background:
    radial-gradient(circle at 22% 20%, rgba(142,203,227,.20), transparent 40%),
    radial-gradient(circle at 80% 78%, rgba(124,179,66,.20), transparent 45%),
    linear-gradient(160deg, rgba(32,24,18,.94), rgba(59,42,30,.96));
}
#valikko { overflow-y: auto; align-items: flex-start; padding-top: 62px; }
.valikko-sisalto { width: min(560px, 100%); margin: auto; text-align: center; padding: 12px 0 30px; }
.logo { display: flex; flex-direction: column; align-items: center; margin: 6px 0 10px; }
.logo-iso {
  font-size: clamp(44px, 9vw, 82px); font-weight: 900; letter-spacing: .10em; line-height: .95;
  color: var(--koivu);
  text-shadow: 0 4px 0 var(--tumma), 0 8px 24px rgba(0,0,0,.55);
}
.logo-pieni {
  font-size: clamp(16px, 3.4vw, 26px); font-weight: 800; letter-spacing: .42em; color: var(--aurinko);
  border-top: 3px solid var(--vaalea); border-bottom: 3px solid var(--vaalea);
  padding: 6px 14px 6px 20px; margin-top: 8px;
}
.alaotsikko { color: var(--koivu); font-size: 15px; line-height: 1.45; margin: 10px auto 18px; max-width: 520px; opacity: .92; }
.valintarivi { display: flex; gap: 8px; justify-content: center; margin: 10px 0 14px; }
.valintarivi button { flex: 1; max-width: 150px; min-height: 46px; }
#valikko .iso-nappi { margin: 7px 0; }
.piirteet { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 16px 0 8px; }
.piirteet span { background: rgba(238,220,180,.10); border: 1px solid rgba(238,220,180,.22); border-radius: 999px; padding: 5px 10px; font-size: 12px; color: var(--koivu); }
.pieni { color: rgba(255,246,229,.6); font-size: 12px; margin-top: 12px; }

/* HUD. */
#hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
#hud > * { pointer-events: auto; }
#ylapalkki {
  position: absolute; left: 0; right: 0; top: 0; min-height: 62px;
  display: flex; align-items: stretch; gap: 4px;
  padding: 6px 60px 6px 8px; background: linear-gradient(180deg, rgba(32,24,18,.96), rgba(32,24,18,.78));
  border-bottom: 2px solid rgba(238,220,180,.35);
  overflow-x: auto; overflow-y: hidden;
}
.hud-lohko {
  display: flex; flex-direction: column; justify-content: center;
  min-width: 68px; padding: 2px 8px; border-right: 1px solid rgba(238,220,180,.16);
}
.hud-otsikko { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--vaalea); font-weight: 700; }
.hud-lohko b { font-size: 20px; line-height: 1.05; color: var(--koivu); }
.hud-lohko em { font-style: normal; font-size: 10px; color: rgba(255,246,229,.62); white-space: nowrap; }
.hud-lohko b.huono { color: var(--punainen); }
.hud-nappi {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-width: 170px; padding: 5px 10px; text-align: left; background: rgba(59,42,30,.85);
}
.hud-nappi i { font-style: normal; font-size: 12px; color: var(--koivu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
.hud-nappi .palkki { display: block; height: 6px; background: rgba(0,0,0,.45); border-radius: 4px; overflow: hidden; margin-top: 2px; }
.hud-nappi .palkki i { display: block; height: 100%; width: 0; background: var(--taivas); }
.hud-napit { display: flex; align-items: center; gap: 5px; margin-left: auto; padding-left: 6px; }
.hud-napit .iso-nappi { width: auto; min-height: 46px; padding: 8px 14px; white-space: nowrap; background: linear-gradient(180deg, var(--metsa), #28552a); }

/* Paneelit. */
.paneeli { position: absolute; top: 72px; max-height: calc(100% - 84px); overflow: hidden; display: flex; flex-direction: column; gap: 6px; }
#vasen-paneeli { left: 8px; width: 238px; }
#oikea-paneeli { right: 8px; width: 196px; align-items: stretch; }
.kortti-paneeli {
  background: var(--paneeli); border: 2px solid rgba(238,220,180,.28); border-radius: 10px;
  padding: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.35);
  max-height: calc(100vh - 100px); overflow-y: auto;
}
.paneeli-otsikko { display: flex; align-items: center; gap: 8px; }
.paneeli-otsikko h2 { font-size: 19px; margin: 0; color: var(--koivu); line-height: 1.1; }
.varijono { width: 9px; height: 28px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.kortti-paneeli .alaotsikko { margin: 6px 0 8px; font-size: 11px; text-align: left; color: rgba(255,246,229,.65); }
.tilastot { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 8px; }
.rivi { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 3px 0; border-bottom: 1px solid rgba(238,220,180,.08); }
.rivi-nimi { color: rgba(255,246,229,.72); }
.rivi-arvo { color: var(--koivu); text-align: right; }
.rivi.huono .rivi-arvo { color: #FF8A65; }
.nappirivi { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 4px; }
.nappirivi .iso-nappi { width: 100%; font-size: 14px; min-height: 44px; }
.vinkki-teksti { font-size: 11px; line-height: 1.35; color: rgba(255,246,229,.6); margin: 8px 0 0; }
#minikartta {
  width: 100%; height: auto; display: block;
  border: 2px solid rgba(238,220,180,.3); border-radius: 8px; background: #0b0907;
}
.vinkki {
  background: rgba(47,127,166,.22); border: 1px solid rgba(142,203,227,.35);
  border-radius: 8px; padding: 8px; font-size: 11px; line-height: 1.35; color: var(--taivas);
}
.loki { background: var(--paneeli); border: 1px solid rgba(238,220,180,.22); border-radius: 8px; overflow: hidden; }
.loki-otsikko { width: 100%; min-height: 34px; background: rgba(59,42,30,.75); color: var(--koivu); border: 0; font-weight: 800; font-size: 12px; cursor: pointer; text-align: left; padding: 6px 9px; }
.loki-lista { max-height: 24vh; overflow-y: auto; }
.loki-rivi { display: flex; gap: 5px; padding: 4px 7px; font-size: 10px; line-height: 1.3; border-top: 1px solid rgba(238,220,180,.07); }
.loki-vuoro { color: var(--vaalea); font-weight: 700; flex: 0 0 auto; }
.loki-teksti { color: rgba(255,246,229,.82); }
.loki-rivi.tärkeä .loki-teksti { color: var(--aurinko); font-weight: 700; }
.loki-rivi.varoitus .loki-teksti { color: #FF8A65; }
.loki-rivi.taistelu .loki-teksti { color: #FFB74D; }
.loki-rivi.tiede .loki-teksti { color: var(--taivas); }

/* Ilmoitus. */
.ilmoitus {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  max-width: min(560px, 88vw); padding: 10px 16px; border-radius: 999px;
  background: rgba(32,24,18,.95); border: 2px solid var(--vaalea); color: var(--koivu);
  font-size: 14px; font-weight: 700; text-align: center; z-index: 40;
  box-shadow: 0 8px 24px rgba(0,0,0,.45); animation: nousu .18s ease-out;
}
@keyframes nousu { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Modaalit. */
.modal {
  position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(8,6,4,.78); padding: 12px;
}
.modal-sisalto {
  position: relative; width: min(880px, 100%); max-height: 92vh; overflow-y: auto;
  background: linear-gradient(180deg, #2B2119, #201812);
  border: 2px solid var(--vaalea); border-radius: 12px; padding: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.modal-otsikko { margin: 0 34px 4px 0; color: var(--koivu); font-size: 24px; }
.modal-otsikko-rivi { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kaupunki-koko { color: var(--aurinko); font-weight: 800; }
.sulje {
  position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(59,42,30,.9); border: 2px solid rgba(238,220,180,.35); color: var(--koivu);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.modal .alaotsikko { text-align: left; margin: 4px 0 12px; font-size: 13px; }
.osio-otsikko { margin: 16px 0 6px; color: var(--aurinko); font-size: 15px; border-bottom: 1px solid rgba(238,220,180,.22); padding-bottom: 4px; }
.ryhma-otsikko { margin: 10px 0 4px; color: var(--vaalea); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.tutkimus-rivi { background: rgba(142,203,227,.12); border-left: 4px solid var(--taivas); padding: 8px 10px; border-radius: 5px; font-size: 13px; color: var(--taivas); }

/* Teknologiapuu. */
.teknologiapuu { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 8px; align-items: start; }
.aikakausi h3 { font-size: 12px; color: var(--vaalea); text-transform: uppercase; letter-spacing: .08em; margin: 4px 0 6px; position: sticky; top: 0; background: #201812; padding: 4px 0; z-index: 1; }
.tek-list { display: flex; flex-direction: column; gap: 5px; }
.teknologia {
  display: flex; flex-direction: column; gap: 1px; text-align: left; min-height: 40px; padding: 6px 8px;
  background: rgba(59,42,30,.8); font-size: 11px;
}
.teknologia.omistettu { border-color: rgba(124,179,66,.8); background: rgba(63,122,58,.30); }
.teknologia.nykyinen { border-color: var(--taivas); box-shadow: 0 0 0 2px rgba(142,203,227,.25) inset; }
.teknologia.estetty { opacity: .52; }
.tek-nimi { font-size: 12px; font-weight: 800; color: var(--koivu); }
.tek-hinta { font-size: 10px; color: var(--aurinko); font-weight: 700; }
.tek-esitiedot, .tek-avaus { font-size: 9px; color: rgba(255,246,229,.58); line-height: 1.25; }
.teknologia .palkki { height: 4px; background: rgba(0,0,0,.4); border-radius: 3px; overflow: hidden; margin-top: 2px; }
.teknologia .palkki i { display: block; height: 100%; background: var(--taivas); }

/* Kaupunkiruutu. */
.kaupunki-tuotot { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 10px 0; }
.tuotto { background: rgba(238,220,180,.08); border: 1px solid rgba(238,220,180,.18); border-radius: 6px; padding: 6px; text-align: center; }
.tuotto span { display: block; font-size: 10px; color: var(--vaalea); }
.tuotto b { display: block; font-size: 17px; color: var(--koivu); }
.jono-lista { display: flex; flex-direction: column; gap: 4px; }
.jono-rivi { display: flex; align-items: center; gap: 6px; background: rgba(238,220,180,.06); border-radius: 6px; padding: 5px 7px; font-size: 12px; }
.jono-nimi { flex: 1; color: var(--koivu); font-weight: 700; }
.jono-hinta { color: var(--aurinko); font-size: 11px; }
.jono-rivi .palkki { width: 70px; height: 5px; background: rgba(0,0,0,.45); border-radius: 3px; overflow: hidden; }
.jono-rivi .palkki i { display: block; height: 100%; background: var(--taivas); }
.poista { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(238,220,180,.3); background: rgba(193,68,14,.35); color: var(--koivu); cursor: pointer; font-size: 18px; }
.tuote-ruudukko { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px; }
.tuote { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 8px; min-height: 44px; font-size: 12px; }
.tuote-nimi { font-weight: 800; color: var(--koivu); }
.tuote-hinta { font-size: 10px; color: var(--aurinko); }

/* Diplomatia. */
.diplo-kortti { background: rgba(238,220,180,.06); border: 1px solid rgba(238,220,180,.2); border-radius: 8px; padding: 10px; margin-bottom: 8px; }
.diplo-otsikko { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.diplo-otsikko h3 { margin: 0; font-size: 16px; color: var(--koivu); flex: 1; }
.diplo-asenne { font-size: 12px; color: var(--aurinko); }
.diplo-tila { font-size: 11px; color: rgba(255,246,229,.7); margin: 5px 0 6px; }
.ehdotus { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(47,127,166,.2); border: 1px solid rgba(142,203,227,.4); border-radius: 6px; padding: 7px 8px; margin-top: 6px; font-size: 12px; color: var(--taivas); }

/* Ohje ja loki. */
.ohje-lista { margin: 4px 0 10px 18px; padding: 0; font-size: 13px; line-height: 1.45; color: rgba(255,246,229,.86); }
.ohje-lista li { margin: 3px 0; }
.koko-loki { max-height: 64vh; overflow-y: auto; border: 1px solid rgba(238,220,180,.16); border-radius: 7px; }

/* Loppuruutu. */
.loppu-sisalto { width: min(520px, 94vw); text-align: center; background: rgba(32,24,18,.96); border: 2px solid var(--vaalea); border-radius: 14px; padding: 26px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.loppu-sisalto h1 { margin: 0 0 8px; font-size: clamp(38px, 8vw, 62px); letter-spacing: .08em; }
.loppu-sisalto h1.voitto { color: var(--aurinko); text-shadow: 0 4px 0 var(--puu); }
.loppu-sisalto h1.havio { color: #FF8A65; text-shadow: 0 4px 0 #5c1f08; }
.loppu-tilastot { margin: 14px 0 18px; text-align: left; }
.loppu-tilastot .rivi { font-size: 14px; padding: 5px 0; }
.loppu-sisalto .nappipino { display: flex; flex-direction: column; gap: 7px; }

/* Kääntökehote. */
.kaanna {
  position: absolute; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px; padding: 24px; background: rgba(13,11,9,.96);
}
.kaanna-kuva { font-size: 72px; color: var(--aurinko); animation: kaannä 2.2s ease-in-out infinite; }
@keyframes kaannä { 0%,100% { transform: rotate(0); } 50% { transform: rotate(90deg); } }
.kaanna p { max-width: 360px; color: var(--koivu); line-height: 1.45; }

/* Pieni näyttö: tiivistä. */
@media (max-width: 1100px) {
  .hud-nappi { min-width: 140px; }
  .hud-nappi i { max-width: 150px; }
  #vasen-paneeli { width: 220px; }
  #oikea-paneeli { width: 170px; }
}
@media (max-width: 860px) {
  .hud-lohko { min-width: 56px; padding: 2px 6px; }
  .hud-lohko b { font-size: 17px; }
  .hud-nappi { min-width: 118px; }
  .hud-nappi i { max-width: 110px; font-size: 10px; }
  .hud-napit .hud-pikku { display: none; }
  #vasen-paneeli { width: 200px; }
  #oikea-paneeli { width: 148px; }
  .loki-lista { max-height: 18vh; }
  .teknologiapuu { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 190px; overflow-x: auto; }
}
@media (max-height: 560px) {
  #ylapalkki { min-height: 54px; padding: 3px 6px; }
  .hud-lohko b { font-size: 16px; }
  .hud-lohko em { display: none; }
  .hud-nappi { min-height: 46px; }
  .hud-napit .iso-nappi { min-height: 42px; }
  .paneeli { top: 60px; max-height: calc(100% - 66px); }
  .kortti-paneeli { max-height: calc(100vh - 72px); padding: 7px; }
  .paneeli-otsikko h2 { font-size: 16px; }
  .tilastot { gap: 0; }
  .rivi { font-size: 10px; padding: 2px 0; }
  .vinkki { display: none; }
  .loki-lista { max-height: 15vh; }
  #oikea-paneeli { width: 140px; }
  #vasen-paneeli { width: 194px; }
}
@media (max-width: 700px) {
  #valikko { padding-top: 58px; }
  .valikko-sisalto { padding-bottom: 20px; }
  .piirteet span { font-size: 10px; }
  .modal-sisalto { padding: 14px; }
  .kaupunki-tuotot { grid-template-columns: repeat(3, 1fr); }
  .loppu-sisalto { padding: 20px 14px; }
}