* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  background: #10130e;
  color: #d8d4c0;
  font-family: Georgia, 'Times New Roman', serif;
  user-select: none;
}

.zaslon { display: none; position: fixed; inset: 0; overflow-y: auto; padding: 24px; }
.zaslon.aktiven { display: block; }

/* ---- meni ---- */
#zaslon-meni { display: none; background: radial-gradient(ellipse at 50% 30%, #24301c 0%, #10130e 70%); text-align: center; }
#zaslon-meni.aktiven { display: flex; align-items: center; justify-content: center; }
.meni-sredina { max-width: 420px; }
.zvezda { font-size: 64px; color: #c03a2b; text-shadow: 0 0 24px #c03a2b66; }
h1 { font-size: 64px; letter-spacing: 12px; color: #e8e2c8; margin: 4px 0 2px; }
.podnaslov { color: #8a9070; margin-bottom: 32px; font-style: italic; }
.opomba { color: #565c48; margin-top: 40px; font-size: 13px; font-style: italic; }

h2 { color: #e8e2c8; letter-spacing: 3px; margin-bottom: 16px; }

.gumb {
  display: block; width: 100%; margin: 8px 0; padding: 10px 18px;
  background: #2b3323; color: #d8d4c0; border: 1px solid #4a5438;
  font-family: inherit; font-size: 16px; cursor: pointer; letter-spacing: 1px;
}
.gumb:hover:not(:disabled) { background: #3a4630; border-color: #7a8560; }
.gumb:disabled { opacity: 0.4; cursor: default; }
.gumb.velik { padding: 14px; font-size: 18px; }
.gumb.nazaj { width: auto; display: inline-block; margin-top: 18px; }
.gumb.mini { width: auto; display: inline-block; margin: 0 0 0 6px; padding: 4px 10px; font-size: 14px; }

/* ---- izbira misij ---- */
#seznam-misij { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; max-width: 1100px; }
.kartica-misije {
  border: 1px solid #4a5438; background: #1b2116; padding: 12px; cursor: pointer;
}
.kartica-misije:hover { background: #2b3323; }
.kartica-misije.zaklenjena { opacity: 0.35; cursor: default; }
.kartica-misije.opravljena { border-color: #c03a2b; }
.kartica-misije .st { color: #8a9070; font-size: 12px; }
.kartica-misije .ime { font-size: 17px; color: #e8e2c8; }
.kartica-misije .tez { color: #c03a2b; letter-spacing: 2px; }
.kartica-misije .kljukica { float: right; color: #c03a2b; }

/* ---- navodila / uvod ---- */
.navodila-vsebina { max-width: 760px; line-height: 1.55; }
.navodila-vsebina p { margin-bottom: 10px; }
.b-zelena { color: #8fce5a; }
.tabela-enot { margin-top: 12px; border-collapse: collapse; }
.tabela-enot td { padding: 4px 8px; }
.p-jelen { color: #8a5a2b; } .p-sokol { color: #5a7a4a; } .p-iskra { color: #b8762b; }
.p-lastovka { color: #7a9ab0; } .p-hrast { color: #a8a06a; } .p-lisica { color: #a05a6a; }

#zaslon-uvod.aktiven, #zaslon-konec.aktiven { display: flex; align-items: center; justify-content: center; }
.uvod-okvir { max-width: 640px; background: #1b2116; border: 1px solid #4a5438; padding: 32px; }
#uvod-zgodba { line-height: 1.6; margin: 14px 0; white-space: pre-line; }
#uvod-cilji { margin: 14px 0; }
#uvod-cilji div::before { content: '★ '; color: #c03a2b; }
#uvod-tezavnost { color: #c03a2b; letter-spacing: 3px; }
.namig { color: #8a9070; font-style: italic; margin-bottom: 18px; }

/* ---- igra ---- */
#zaslon-igra { padding: 0; }
#platno { display: block; position: absolute; inset: 0; cursor: crosshair; }

#hud-vrh {
  position: absolute; top: 0; left: 0; right: 0; padding: 8px 14px;
  background: linear-gradient(#10130ee8, #10130e00); display: flex; align-items: center; gap: 14px;
  pointer-events: none;
}
#hud-vrh button { pointer-events: auto; }
#hud-ime { font-size: 18px; color: #e8e2c8; letter-spacing: 2px; flex: 1; }
#hud-alarm { color: #ff5a3c; font-weight: bold; letter-spacing: 2px; animation: utrip 0.8s infinite; }
@keyframes utrip { 50% { opacity: 0.25; } }

#hud-cilji {
  position: absolute; top: 44px; left: 14px; background: #10130ecc; border: 1px solid #4a5438;
  padding: 8px 12px; font-size: 13px; max-width: 300px;
}
#hud-cilji .cilj-opravljen { color: #8fce5a; text-decoration: line-through; }
#hud-cilji div::before { content: '• '; color: #c03a2b; }

#minimapa {
  position: absolute; top: 44px; right: 14px; background: #10130ecc;
  border: 1px solid #4a5438; image-rendering: pixelated;
}

#hud-portreti { position: absolute; left: 14px; bottom: 96px; display: flex; flex-direction: column; gap: 6px; }
.portret {
  width: 58px; border: 2px solid #4a5438; background: #1b2116; cursor: pointer;
  text-align: center; padding: 4px 2px 2px; position: relative;
}
.portret.izbran { border-color: #e8c84a; }
.portret.mrtev { opacity: 0.35; filter: grayscale(1); }
.portret .pz { font-size: 22px; line-height: 1; }
.portret .pglava { display: block; width: 100%; height: auto; }
.portret .pi { font-size: 10px; color: #8a9070; display: block; }
.portret .hp { height: 4px; background: #402020; margin-top: 3px; }
.portret .hp i { display: block; height: 100%; background: #8fce5a; }
.portret .tipka { position: absolute; top: 1px; left: 3px; font-size: 9px; color: #565c48; }

#hud-sporocilo {
  position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
  color: #e8e2c8; text-shadow: 0 1px 3px #000; font-size: 15px; pointer-events: none;
  text-align: center;
}

#hud-akcije {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
}
.gumb-akcija {
  padding: 8px 14px; background: #2b3323cc; border: 1px solid #4a5438; color: #d8d4c0;
  font-family: inherit; font-size: 14px; cursor: pointer;
}
.gumb-akcija:hover:not(:disabled) { background: #3a4630; }
.gumb-akcija:disabled { opacity: 0.35; cursor: default; }
.gumb-akcija.aktivna { border-color: #e8c84a; color: #e8c84a; }

#hud-oprema {
  position: absolute; bottom: 8px; right: 14px; color: #8a9070; font-size: 13px;
  text-align: right; background: #10130ecc; padding: 6px 10px; border: 1px solid #4a5438;
}

.prekrivalo {
  position: absolute; inset: 0; background: #10130ecc; display: flex;
  align-items: center; justify-content: center; text-align: center;
}
.skrit { display: none !important; }

#konec-okvir.zmaga h2 { color: #8fce5a; }
#konec-okvir.poraz h2 { color: #ff5a3c; }