/* Z3-us Si v0.1 — Juhtimiskeskus · tume minimalistlik (leek #e8601a) */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: #0a0a0a; color: #e8e8e8;
  font-family: 'Segoe UI', system-ui, sans-serif; font-size: 14px;
  display: flex; flex-direction: column; overflow: hidden;
}
button { font-family: inherit; cursor: pointer; }

/* ---------- ülemine riba ---------- */
.riba {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 18px; border-bottom: 1px solid #222; background: #0d0d0d;
}
.mark { display: flex; align-items: center; gap: 10px; }
.leek-mini { font-size: 24px; filter: drop-shadow(0 0 8px #e8601a); }
.mark-nimi { font-weight: 700; letter-spacing: 1px; }
.versioon { color: #e8601a; font-size: 11px; }
.mark-alus { font-size: 10px; opacity: .5; letter-spacing: 2px; text-transform: uppercase; }

.tuletilk-nait {
  display: flex; align-items: center; gap: 14px;
  background: #141414; border: 1px solid #2a2a2a; border-radius: 12px;
  padding: 6px 16px;
}
.nait-voimsus { display: flex; flex-direction: column; line-height: 1.2; }
.nait-voimsus b { color: #ff8c00; font-size: 18px; }
.nait-voimsus span { font-size: 9px; letter-spacing: 2px; opacity: .6; }
.nait-reziim { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: #e8601a; }
.nait-ribad { width: 110px; height: 6px; border-radius: 3px; background: #222; overflow: hidden; }
.nait-taidis { height: 100%; width: 0%; background: linear-gradient(90deg, #7a2c00, #e8601a, #ffb066); transition: width .8s ease; }

.salanupp {
  display: flex; align-items: center; gap: 8px;
  background: #2a1206; border: 1px solid #7a2c00; color: #ffb066;
  border-radius: 12px; padding: 9px 16px; font-size: 12px;
  user-select: none; transition: background .2s;
}
.salanupp:hover { background: #3a1808; }
.salanupp.aktiivne { background: #7a2c00; color: #fff; }
.salanupp-leek { font-size: 16px; }

/* ---------- ristkülg ---------- */
.ristkylg {
  flex: 1; display: grid; grid-template-columns: 280px 1fr 340px;
  gap: 12px; padding: 12px; min-height: 0;
}
.paneel {
  background: #111; border: 1px solid #222; border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; min-height: 0;
}
.paneel h2 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
  color: #e8601a; margin: 0 0 12px;
}

/* ---------- Tuletilk paneel ---------- */
.leek-aken { text-align: center; padding: 12px 0 18px; }
#leek { font-size: 52px; transition: all 1.2s ease; line-height: 1.2; }
#voimsus { font-size: 34px; font-weight: 700; color: #ff8c00; }
#tase { font-size: 10px; letter-spacing: 2px; color: #ffb066; opacity: .8; }

.nupp-tais {
  width: 100%; padding: 9px; border-radius: 10px; border: 1px solid #2a2a2a;
  background: #1a1a1a; color: #ccc; font-size: 12px;
}
.nupp-tais:hover { border-color: #e8601a; color: #e8601a; }
.tuumad-ala { margin-top: 12px; overflow-y: auto; }
.rida { margin: 9px 0; }
.rida label { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 2px; opacity: .85; }
.rida label b { color: #ff8c00; }
input[type=range] { width: 100%; accent-color: #e8601a; height: 20px; }

.varav {
  margin-top: auto; background: #0d0d0d; border: 1px solid #262626;
  border-radius: 10px; padding: 12px; font-size: 11px;
}
.reziim { font-size: 14px; font-weight: 700; letter-spacing: 2px; color: #e8601a; margin-bottom: 8px; }
.varav-rida { display: flex; justify-content: space-between; padding: 2px 0; }
.varav-rida span { opacity: .5; }
.varav-rida b { text-align: right; font-weight: 600; }

/* ---------- chat ---------- */
.chat-paneel { padding: 0; }
.chat-pais {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid #1e1e1e;
}
.pais-nimi { font-weight: 700; letter-spacing: 1px; }
.pais-alaus { font-size: 10px; opacity: .5; letter-spacing: 1px; }
.nupp-vaike {
  background: #1a1a1a; border: 1px solid #2a2a2a; color: #aaa;
  border-radius: 8px; padding: 6px 12px; font-size: 11px;
}
.nupp-vaike:hover { border-color: #e8601a; color: #e8601a; }
.tooriistad-riip { padding: 8px 18px; background: #0d0d0d; border-bottom: 1px solid #1e1e1e; }

.sonumid { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.sonum { max-width: 78%; padding: 11px 15px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; }
.sonum.kasutaja { align-self: flex-end; background: #1e1410; border: 1px solid #3a2010; }
.sonum.aju { align-self: flex-start; background: #161616; border: 1px solid #262626; }
.sonum.susteem { align-self: center; background: transparent; border: 1px dashed #2e2e2e; font-size: 11px; opacity: .75; max-width: 92%; }

.mottekaik {
  margin-bottom: 8px; border-left: 2px solid #e8601a; padding-left: 10px;
  font-size: 11px; opacity: .65; font-style: italic;
}
.mottekaik summary { cursor: pointer; font-style: normal; letter-spacing: 1px; text-transform: uppercase; font-size: 9px; }
.tegevused { display: flex; gap: 8px; margin-top: 10px; }
.tegevused button {
  background: #2a1206; border: 1px solid #7a2c00; color: #ffb066;
  border-radius: 8px; padding: 5px 12px; font-size: 11px;
}
.tegevused button:hover { background: #3a1808; }

.sisestus {
  display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid #1e1e1e;
}
.sisestus input {
  flex: 1; background: #0d0d0d; border: 1px solid #262626; border-radius: 10px;
  color: #e8e8e8; padding: 11px 14px; font-size: 13px; outline: none;
}
.sisestus input:focus { border-color: #e8601a; }
.nupp-primaarne {
  background: #e8601a; border: none; color: #140a04; font-weight: 700;
  border-radius: 10px; padding: 0 22px; font-size: 13px;
}
.nupp-primaarne:hover { background: #ff7a2e; }

/* ---------- SPz3 ---------- */
.spz3-pais { display: flex; justify-content: space-between; align-items: center; }
.sandbox-hoiatus {
  font-size: 9.5px; letter-spacing: .5px; color: #e27e7e;
  background: #1a0e0e; border: 1px solid #4a1e1e; border-radius: 8px;
  padding: 6px 10px; margin-bottom: 12px;
}
.spz3-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.tyhi { text-align: center; opacity: .35; font-size: 11.5px; padding: 40px 10px; line-height: 1.8; }

.kaart { background: #0d0d0d; border: 1px solid #262626; border-radius: 12px; padding: 12px; }
.kaart-pais { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.kaart-nimi { font-weight: 700; font-size: 12px; letter-spacing: 1px; }
.kaart-seis { font-size: 9px; letter-spacing: 1.5px; padding: 2px 8px; border-radius: 20px; }
.seis-tootab { background: #14351c; color: #7ee2a0; }
.seis-valmis { background: #2a2010; color: #ffd080; }
.seis-peatatud { background: #2a2a2a; color: #999; }
.kaart-ulesanne { font-size: 11px; opacity: .7; line-height: 1.5; margin-bottom: 8px; }
.kaart-riba { height: 4px; background: #1e1e1e; border-radius: 2px; overflow: hidden; margin: 6px 0; }
.kaart-taidis { height: 100%; background: #e8601a; width: 0%; transition: width .5s; }
.kaart-meta { display: flex; justify-content: space-between; font-size: 9.5px; opacity: .55; }
.kaart-logi {
  margin-top: 8px; background: #080808; border-radius: 8px; padding: 8px;
  font-family: 'JetBrains Mono', Consolas, monospace; font-size: 9px;
  max-height: 110px; overflow-y: auto; line-height: 1.7; color: #8a8a8a;
}
.kaart-nupud { display: flex; gap: 6px; margin-top: 8px; }
.kaart-nupud button {
  flex: 1; background: #1a1a1a; border: 1px solid #2a2a2a; color: #aaa;
  border-radius: 7px; padding: 5px 0; font-size: 10px;
}
.kaart-nupud button:hover { border-color: #e8601a; color: #e8601a; }

@media (max-width: 1100px) {
  .ristkylg { grid-template-columns: 1fr; overflow-y: auto; }
  body { overflow: auto; }
}