/* Zoster Sky – stil: negru, auriu, portocaliu (ca launcherul) */
:root{
  --negru:#0b0a10; --panou:#14111b; --panou2:#1c1724; --linie:#3b2f1a;
  --aur:#d8b25a; --aur-d:#f6e3a1; --aur-i:#7a5a1e; --port:#e8893a;
  --text:#e9e2cf; --sters:#9b927c; --ok:#5fd07a; --rau:#e65a50;
}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;background:var(--negru);color:var(--text);font:15px/1.55 Inter,Segoe UI,sans-serif;
  background-image:linear-gradient(180deg,rgba(11,10,16,.55),rgba(11,10,16,.92) 55%,var(--negru)),var(--fundal);
  background-size:cover;background-position:center top;background-attachment:fixed;display:flex;flex-direction:column}
a{color:var(--aur-d);text-decoration:none}
a:hover{color:#fff}
h1,h2,h3{font-family:Cinzel,Georgia,serif;color:var(--aur-d);letter-spacing:1.5px;margin:0 0 .6em}
h1{font-size:30px} h2{font-size:19px} h3{font-size:15px;color:var(--aur)}
.mic{font-size:13px;color:var(--sters)}
.inline{display:inline}

/* antet */
.sus{display:flex;align-items:center;gap:24px;padding:12px 28px;background:linear-gradient(180deg,#08070c,#0d0b12);
  border-bottom:1px solid var(--aur-i);box-shadow:0 1px 0 #000,0 6px 24px rgba(0,0,0,.6);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.logo{display:flex;align-items:baseline;gap:8px}
.logo .z{font-family:'Cinzel Decorative',serif;font-weight:900;font-size:26px;letter-spacing:3px;
  background:linear-gradient(180deg,#fff6d0,#f0cf78 45%,#b8862e 65%,#f3dc96);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo .sky{font-family:Cinzel,serif;font-weight:700;color:var(--port);letter-spacing:6px;font-size:13px}
.meniu{display:flex;gap:4px;flex-wrap:wrap}
.meniu a{padding:7px 14px;font-family:Cinzel,serif;font-size:13px;letter-spacing:1px;color:var(--text);border:1px solid transparent}
.meniu a:hover{border-color:var(--aur-i);color:var(--aur-d)}
.meniu a.activ{border-color:var(--aur);color:var(--aur-d);background:rgba(216,178,90,.08)}
.dreapta{margin-left:auto;display:flex;align-items:center;gap:14px}
.limba a{padding:4px 8px;font-size:12px;font-weight:600;color:var(--sters);border:1px solid var(--linie)}
.limba a+a{border-left:0}
.limba a.activ{color:#2a1a04;background:linear-gradient(180deg,#f6e3a1,#d8a548)}
.eu{color:var(--aur);font-weight:600}
button.link{background:none;border:0;color:var(--sters);cursor:pointer;font:inherit;padding:0}
button.link:hover{color:var(--port)}

main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:28px 20px 40px}
.jos{text-align:center;color:#5e5646;font-size:12px;padding:18px;border-top:1px solid #1d1810}

/* carduri */
.card{position:relative;background:linear-gradient(180deg,rgba(26,21,34,.94),rgba(14,12,19,.96));border:1px solid var(--linie);
  padding:22px 24px;box-shadow:0 0 0 1px #000,0 14px 40px rgba(0,0,0,.55);background-size:cover;background-position:center}
.card::before{content:"";position:absolute;inset:4px;border:1px solid rgba(216,178,90,.12);pointer-events:none}
.lat{width:100%}
.grila{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grila.doua{grid-template-columns:1fr 1fr}
.banner{grid-column:1/3;min-height:200px;display:flex;flex-direction:column;justify-content:center}
.banner small{color:var(--port);letter-spacing:3px;text-transform:uppercase;font-family:Cinzel,serif}
.banner h1{font-size:34px;margin:.2em 0}
.banner p{color:var(--text);max-width:560px}
.grila.doua .banner{grid-column:1/3}
.noutati{grid-column:1/3}
.despre{grid-column:3/4;grid-row:2/4}
.stare .mare{font-family:Cinzel,serif;font-size:26px;display:flex;align-items:center;gap:10px;margin:.2em 0 .5em}
.stare .mare.ok{color:var(--ok)} .stare .mare.rau{color:var(--rau)}
.punct{width:12px;height:12px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}
.stire{display:flex;gap:14px;padding:7px 0;border-bottom:1px solid rgba(59,47,26,.5)}
.stire .data{color:var(--port);font-weight:600;min-width:52px;font-size:13px}
.luna{margin-top:14px}
.bara{height:9px;background:#221c12;border:1px solid #4a3a1a;margin:6px 0}
.bara div{height:100%;background:linear-gradient(90deg,#8a6420,var(--port),#f0cf78);box-shadow:0 0 10px rgba(232,137,58,.5)}
.scurtatura{min-height:150px;display:flex;align-items:flex-end;font-family:Cinzel,serif;font-size:18px;color:var(--aur-d);transition:transform .15s,border-color .15s}
.scurtatura:hover{transform:translateY(-3px);border-color:var(--aur)}
.scurtatura span{border-bottom:2px solid var(--port);padding-bottom:4px}

/* butoane și formulare */
.btn-aur{display:inline-block;text-align:center;cursor:pointer;border:1px solid #fff0b8;padding:12px 26px;margin-top:10px;
  font-family:Cinzel,serif;font-weight:700;font-size:15px;letter-spacing:3px;color:#2a1a04;
  background:linear-gradient(180deg,#fff0b8 0%,#f0c868 35%,#c98a28 70%,#e9a95c 100%);
  box-shadow:0 0 0 2px #5a3f10,0 0 22px rgba(232,160,80,.45),inset 0 -3px 6px rgba(80,50,0,.35)}
.btn-aur:hover{filter:brightness(1.08);color:#2a1a04}
label{display:block;margin:12px 0 0;font-size:13px;color:var(--aur);letter-spacing:.5px}
input,select,textarea{display:block;width:100%;margin-top:5px;padding:10px 12px;background:#0e0c13;color:var(--text);
  border:1px solid #4a3c22;font:15px Inter,sans-serif;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--aur);box-shadow:0 0 0 2px rgba(216,178,90,.15)}
input[type=file]{padding:8px;color:var(--sters)}
label.bifa{display:flex;align-items:center;gap:8px;color:var(--text)}
label.bifa input{width:auto;margin:0}
.capcana{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alerta{padding:10px 14px;margin:12px 0;border:1px solid;font-size:14px}
.alerta.rau{border-color:var(--rau);background:rgba(230,90,80,.1);color:#ffb0a8}
.alerta.bine{border-color:var(--ok);background:rgba(95,208,122,.1);color:#b4f0c4}

/* prima pagină */
.intrare{display:grid;grid-template-columns:1.1fr 1fr;gap:0;max-width:980px;margin:10px auto;border:1px solid var(--aur-i);
  box-shadow:0 0 0 1px #000,0 0 0 4px #2a2112,0 0 0 5px var(--aur-i),0 30px 80px rgba(0,0,0,.8)}
.erou-mare{position:relative;min-height:560px;overflow:hidden;border-right:1px solid var(--aur-i)}
.erou-mare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 0}
.erou-mare::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,6,12,.8) 75%,#0b0a10)}
.erou-text{position:absolute;left:0;right:0;bottom:26px;text-align:center;z-index:1;padding:0 20px}
.erou-text p{color:var(--aur-d);font-family:Cinzel,serif;font-size:13px;letter-spacing:1px}
.logo-mare .z{display:block;font-family:'Cinzel Decorative',serif;font-weight:900;font-size:58px;letter-spacing:4px;line-height:1;
  background:linear-gradient(180deg,#fff6d0,#f0cf78 40%,#b8862e 62%,#f3dc96);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #3a2a0c) drop-shadow(0 0 14px rgba(240,200,110,.45))}
.logo-mare .sky{display:flex;align-items:center;justify-content:center;gap:10px;font-family:Cinzel,serif;font-weight:700;color:var(--port);letter-spacing:12px}
.logo-mare .sky i{display:block;width:50px;height:1px;background:linear-gradient(90deg,transparent,var(--aur))}
.logo-mare .sky i:last-child{transform:scaleX(-1)}
.formular{box-shadow:none;border:0;display:flex;flex-direction:column;justify-content:center;padding:34px}
.tab-uri{display:flex;border-bottom:1px solid var(--linie);margin-bottom:6px}
.tab{flex:1;background:none;border:0;border-bottom:2px solid transparent;color:var(--sters);padding:12px;cursor:pointer;
  font-family:Cinzel,serif;font-size:15px;letter-spacing:1px}
.tab.activ{color:var(--aur-d);border-bottom-color:var(--port)}
.panou-tab{display:none}
.panou-tab.activ{display:block}
.panou-tab .btn-aur{width:100%;margin-top:18px}

/* cont / rapoarte */
.date{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0}
.date dt{color:var(--aur)} .date dd{margin:0}
.rand-raport{display:block;padding:10px 0;border-bottom:1px solid rgba(59,47,26,.5);color:var(--text)}
.rand-raport small{display:block;color:var(--sters)}
.eticheta{display:inline-block;font-size:11px;padding:2px 8px;margin-left:6px;border:1px solid;letter-spacing:.5px;background:none;color:var(--text);cursor:pointer}
.eticheta.nou{border-color:var(--port);color:var(--port)}
.eticheta.vazut{border-color:var(--aur);color:var(--aur)}
.eticheta.rezolvat{border-color:var(--ok);color:var(--ok)}
.eticheta.activ{background:rgba(216,178,90,.15)}
.stari{display:flex;gap:8px;margin-top:14px}
.text-raport{margin:14px 0;padding:12px;background:#0e0c13;border:1px solid var(--linie);white-space:normal}
.capturi{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.capturi img{width:100%;border:1px solid var(--linie)}
.mini{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.mini img{height:70px;border:1px solid var(--linie)}

@media (max-width:860px){
  .grila,.grila.doua{grid-template-columns:1fr}
  .banner,.noutati,.despre,.grila.doua .banner{grid-column:auto;grid-row:auto}
  .intrare{grid-template-columns:1fr}
  .erou-mare{min-height:320px;border-right:0;border-bottom:1px solid var(--aur-i)}
  .sus{position:static;padding:10px 14px;gap:8px 12px}
  .logo .z{font-size:22px}
  .dreapta{margin-left:auto;gap:10px;font-size:14px}
  .meniu{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .meniu::-webkit-scrollbar{display:none}
  .meniu a{white-space:nowrap;padding:6px 10px;font-size:12px}
  h1,.banner h1{font-size:24px}
  main{padding:18px 16px}
}

/* caracterele din „Contul meu” */
.caracter{margin:12px 0;padding:12px 14px;background:rgba(14,12,19,.85);border:1px solid var(--linie);border-left:3px solid var(--aur)}
.caracter.rasa-0{border-left-color:#e05a3a} .caracter.rasa-1{border-left-color:#5fb36a} .caracter.rasa-2{border-left-color:#e8b33a} .caracter.rasa-3{border-left-color:#7aa7e8}
.caracter .nume{font-family:Cinzel,serif;font-size:18px;color:var(--aur-d)}
.caracter .nume span{font-family:Inter,sans-serif;font-size:12px;color:var(--port);margin-left:8px;letter-spacing:1px}
.statistici{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.statistici span{display:flex;flex-direction:column;background:#0e0c13;padding:6px 8px;border:1px solid rgba(59,47,26,.6)}
.statistici b{color:var(--text);font-size:15px} .statistici small{color:var(--sters);font-size:11px}