:root{
  --bg:#08110f;--green:#2BE3A2;--red:#FF4757;--amber:#FFC857;--gold:#FFD24A;
  --manila:#E6D7AE;--ink:#EAF6F2;--dim:#79989a;--line:#1f3b3a;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);
  overflow:hidden;overscroll-behavior:none;user-select:none}
/* NIEBO jako warstwy: #sky (tło) < #sun (tarcza, zakotwiczona w świecie) < #map (przezroczyste płótno; bryły zasłaniają słońce).
   Płótno nad horyzontem jest przezroczyste -> widać #sun i #sky; bryły (nieprzezroczyste) zasłaniają słońce za sylwetą miasta. */
/* NIEBO + SŁOŃCE + KSIĘŻYC w tle #map (płótno nad horyzontem jest przezroczyste -> tu prześwituje; bryły zasłaniają je).
   Kolory (--skytop/mid/hor, --suncol) i pozycje (--sunx/y, --moonx/y, --moonsx/y) ustawia JS wg realnej pory dnia nad Warszawą.
   Kolejność warstw: słońce > cień-fazy-księżyca > tarcza-księżyca > niebo. */
#map{position:fixed;inset:0;width:100%;height:100%;
  background-image:
    radial-gradient(circle at var(--sunx,50%) var(--suny,-400px), var(--suncol,#fffbe6) 0 22px, color-mix(in srgb, var(--suncol,#fff6be) 75%, transparent) 46px, transparent 120px),
    linear-gradient(180deg, var(--skytop,#3f8fdb) 0%, var(--skymid,#69abe6) 45%, var(--skyhor,#d8eaf6) 100%);
  background-repeat: no-repeat}
/* Księżyc jako osobny element NAD bryłami (sztuczna kamera 3D go nie zasłania) -> stały, niezależny od zoomu/pitchu.
   W DOM między #map a HUD -> renderuje się nad mapą, ale pod paskami/awatar. */
#moon{position:fixed;width:50px;height:50px;pointer-events:none;display:none;
  background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 0 6px rgba(220,226,255,.4))}
#map canvas{outline:none}
/* gracz: stały awatar na środku (kamera podąża) */
#me{position:fixed;left:50%;top:var(--py,50%);z-index:5;pointer-events:none;
  transform:translate(-50%,-50%);transition:transform .08s linear}
/* domyślnie (przed ustawieniem klasy): kropka */
#me:not(.car):not(.emoji){width:18px;height:18px;border-radius:50%;
  background:#2BE3A2;border:2px solid #fff;box-shadow:0 0 0 6px rgba(43,227,162,.18)}
#me.emoji{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  font-size:26px;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
#me.car{width:74px;height:60px;background-size:contain;background-repeat:no-repeat;
  background-position:center bottom;filter:drop-shadow(0 3px 5px rgba(0,0,0,.55))}
/* podmuch/kurz pod helikopterem przy lądowaniu na miejscu dyżuru */
#heliDust{position:fixed;left:50%;top:var(--py,50%);z-index:4;pointer-events:none;opacity:0;
  width:140px;height:54px;margin:14px 0 0 -70px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(214,204,176,.55),rgba(214,204,176,0) 70%)}
#heliDust.go{animation:heliDust 1.7s ease-out}
@keyframes heliDust{
  0%{opacity:0;transform:scale(.15)}
  55%{opacity:0;transform:scale(.4)}
  70%{opacity:.9;transform:scale(.95)}
  100%{opacity:0;transform:scale(1.8)}}
/* markery placówek / NPC */
.m-fac{width:calc(26px*var(--ms,1));height:calc(26px*var(--ms,1));border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:calc(14px*var(--ms,1));background:rgba(7,16,15,.78);border:2px solid var(--line);cursor:default;transition:transform .1s}
.m-fac.t-sor{border-color:var(--red)}.m-fac.t-szp{border-color:var(--gold)}
.m-fac.t-noc{border-color:#7Ca0ff}.m-fac.t-poz,.m-fac.t-gab{border-color:var(--green)}
.m-fac.near{transform:scale(1.18);box-shadow:0 0 0 4px rgba(43,227,162,.25)}
.m-fac.graf{box-shadow:0 0 0 3px var(--gold)}
.m-fac.cool{opacity:.45}
.m-fac.rep{animation:repp .6s infinite}
@keyframes repp{0%,100%{box-shadow:0 0 0 3px rgba(255,71,87,.9)}50%{box-shadow:0 0 0 7px rgba(255,71,87,.2)}}
.m-npc{width:8px;height:8px;border-radius:2px;background:#7Ca0a0}
.m-npc.abs{background:#FF8A3D}
.m-npc.near{box-shadow:0 0 0 4px rgba(255,138,61,.3)}
.panel{background:rgba(7,16,15,.84);border:1px solid var(--line);border-radius:10px;backdrop-filter:blur(3px)}
.btn{font-family:var(--sans);font-weight:800;font-size:14px;padding:12px 18px;border-radius:11px;border:0;cursor:pointer;letter-spacing:.02em}
.btn:active{transform:translateY(1px)}
.btn.go{background:var(--green);color:#04130d}
.btn.rep{background:rgba(255,138,61,.16);color:#ffc59a;border:1px solid #FF8A3D;font-size:12px;font-weight:700}

/* top */
#top{position:fixed;top:0;left:0;right:0;padding:9px 12px;display:flex;align-items:center;gap:11px;
  font-family:var(--mono);font-size:12px;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,11,10,.95),rgba(5,11,10,0))}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 11px var(--red);animation:p 1.1s infinite}
@keyframes p{0%,100%{opacity:1}50%{opacity:.25}}
.ttl{font-weight:900;letter-spacing:.04em}.ttl b{color:var(--gold)}
.chip{font-size:10px;color:var(--green);border:1px solid var(--line);border-radius:20px;padding:2px 8px}
.grow{flex:1}
#hajs{font-family:var(--mono);font-weight:900;color:var(--gold);font-size:17px}
#hajs small{color:var(--dim);font-weight:600;font-size:10px}

/* goal */
#goalw{position:fixed;top:38px;left:50%;transform:translateX(-50%);width:min(520px,94vw);
  padding:7px 11px 9px;font-family:var(--mono);font-size:10px;pointer-events:none}
.gl{display:flex;justify-content:space-between;color:var(--dim);letter-spacing:.1em;margin-bottom:4px}
.bar{height:9px;border-radius:5px;background:#0c1c1a;border:1px solid var(--line);overflow:hidden}
#goal{height:100%;width:0;background:linear-gradient(90deg,#b8901f,var(--gold))}

/* suspend */
#suspend{position:fixed;top:70px;left:50%;transform:translateX(-50%);display:none;
  font-family:var(--mono);font-size:11px;font-weight:800;color:#ff9aa3;
  background:rgba(255,71,87,.16);border:1px solid var(--red);border-radius:9px;padding:7px 13px;pointer-events:none}

/* licence */
/* scalony panel boczny po prawej (licencja + transport + dyżury w jednym) */
#sidebar{position:fixed;right:10px;top:50px;width:210px;max-height:calc(100dvh - 62px);overflow-y:auto;overflow-x:hidden;
  padding:0;display:flex;flex-direction:column;font-family:var(--mono)}
#sidebar>#lic{padding:10px 11px 11px}
#sidebar.collapsed{max-height:none}
#sidebar.collapsed>#lic>.lic-body,#sidebar.collapsed>#transport,#sidebar.collapsed>#grafiki{display:none}
.lic-tog{position:absolute;right:7px;top:7px;width:22px;height:22px;border:1px solid var(--line);border-radius:6px;
  background:rgba(7,16,15,.6);color:var(--ink);cursor:pointer;font-size:11px;line-height:1;padding:0;z-index:3}
.lic-tog:hover{border-color:var(--green)}
#lic .h{font-size:8px;letter-spacing:.18em;color:var(--dim)}
#lic canvas{display:block;margin:5px 0 3px;width:168px;height:30px}
#lic .pesel{font-size:11px;letter-spacing:.06em}
#lic .who{font-size:10px;color:var(--manila);margin-top:4px}
.lic-save{margin-top:7px;width:100%;background:transparent;border:1px solid var(--line);color:var(--dim);
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;padding:5px;border-radius:7px;cursor:pointer}
.lic-save:hover{border-color:var(--green);color:var(--ink)}

/* transport (sekcja w panelu bocznym) */
#transport{display:flex;flex-direction:column;gap:5px;padding:8px 11px;border-top:1px solid var(--line)}
.tr{display:flex;align-items:center;gap:7px;background:transparent;border:1px solid transparent;border-radius:8px;
  padding:5px 8px;color:var(--ink);font-family:var(--mono);font-size:10px;cursor:pointer;min-width:118px}
.tr .e{font-size:17px;line-height:1}
.tr.on{border-color:var(--green);background:rgba(43,227,162,.12)}
.tr.lock{opacity:.5;cursor:default}
.tr.lock .lk{color:var(--dim)}
.tr.buy{border-color:var(--gold);background:rgba(255,210,74,.12);cursor:pointer}
.tr.buy .lk{color:var(--gold);font-weight:600}

/* grafiki/dyżury (sekcja w panelu bocznym) */
#grafiki{width:auto;padding:9px 11px;border-top:1px solid var(--line)}
.gh{font-size:9px;letter-spacing:.14em;color:var(--dim);margin-bottom:6px;display:flex;justify-content:space-between}
.grow{display:flex;align-items:center;gap:6px;font-size:10px;padding:4px 0;border-top:1px solid rgba(31,59,58,.5)}
.grow .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#cfe9e2}
.grow .st{font-size:9px}.grow .st.ok{color:var(--green)}.grow .st.warn{color:var(--amber)}
.grow.rep{color:#ff9aa3}.grow.rep .st{color:var(--red);font-weight:800}
.grow .off{background:transparent;border:1px solid var(--line);border-radius:6px;color:var(--dim);
  font-family:var(--mono);font-size:9px;padding:3px 6px;cursor:pointer}
.empty{font-size:10px;color:var(--dim);padding:4px 0}

/* prompts */
#prompt,#reportPrompt{position:fixed;left:50%;transform:translateX(-50%);text-align:center;display:none}
#prompt{top:76px}#reportPrompt{bottom:158px}
#prompt .pl,#reportPrompt .pl{font-family:var(--mono);font-size:11px;color:var(--dim);margin-bottom:7px}
#prompt .pl b{color:var(--ink)}#reportPrompt .pl b{color:#ffc59a}

/* joystick / zoom / hint */
#stick{position:fixed;left:16px;bottom:18px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(43,227,162,.07),rgba(43,227,162,0) 70%);touch-action:none}
#knob{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  background:rgba(43,227,162,.18);border:1px solid var(--green)}
.hint{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);font-family:var(--mono);font-size:10px;color:var(--dim);text-align:center;pointer-events:none}
.attr{position:fixed;right:8px;bottom:4px;font-family:var(--mono);font-size:8px;color:#46625f;pointer-events:none}

/* toast */
#toast{position:fixed;left:50%;top:104px;transform:translateX(-50%);font-family:var(--mono);font-weight:800;
  font-size:13px;padding:8px 15px;border-radius:10px;opacity:0;transition:opacity .25s,transform .25s;
  pointer-events:none;max-width:92vw;text-align:center}
#toast.ok{background:rgba(43,227,162,.16);border:1px solid var(--green);color:var(--green)}
#toast.dim{background:rgba(7,16,15,.9);border:1px solid var(--line);color:var(--dim)}
#toast.bad{background:rgba(255,71,87,.18);border:1px solid var(--red);color:#ff9aa3}
#toast.show{opacity:1;transform:translate(-50%,6px)}

/* splash / win */
.full{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(80% 60% at 50% 32%,#0c1d1a,#060d0c);padding:22px;text-align:center}
.kick{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--gold)}
h1{font-size:clamp(30px,9vw,52px);margin:.14em 0 .04em;letter-spacing:.02em;font-weight:900;line-height:.96}
h1 .x{color:var(--gold)}
.dom{font-family:var(--mono);letter-spacing:.18em;color:var(--dim);font-size:12px}
.lead{color:var(--dim);font-family:var(--mono);font-size:12px;line-height:1.6;max-width:360px;margin:18px auto 22px}
.enter{background:var(--green);color:#04130d;border:0;font-weight:900;font-size:15px;padding:14px 26px;border-radius:11px;cursor:pointer;letter-spacing:.03em}
.enter:active{transform:translateY(1px)}
.mk{margin-top:13px;font-family:var(--mono);font-size:10px;color:#46625f}

/* okna zapisu/wczytania kodu */
#startSave{z-index:30}
.savecard{max-width:380px;width:100%;display:flex;flex-direction:column;gap:12px;align-items:center}
.savecard h2{font-size:18px;margin:.2em 0 0;font-weight:800}
.found{font-family:var(--mono);font-size:12px;color:var(--ink);background:rgba(43,227,162,.1);
  border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.enter.sm{font-size:13px;padding:10px 18px}
.enter.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.orsep{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.1em;margin-top:4px}
.codebox{width:100%;min-height:62px;resize:vertical;background:rgba(7,16,15,.7);color:var(--green);
  border:1px solid var(--line);border-radius:9px;font-family:var(--mono);font-size:11px;padding:9px;word-break:break-all}

/* ekran startowy — wyraźny NOWA GRA + spójna sekcja wczytywania */
.ss-logo{font-size:clamp(30px,8vw,42px);font-weight:900;line-height:.95;margin:.1em 0 .35em}
.ss-logo .x{color:var(--gold)}
.enter.big{font-size:19px;font-weight:900;padding:16px 0;width:100%;border-radius:13px;letter-spacing:.04em;
  box-shadow:0 6px 24px rgba(43,227,162,.32)}
.loadbox{width:100%;margin-top:18px;border:1px solid var(--line);border-radius:12px;padding:12px;
  display:flex;flex-direction:column;gap:8px;background:rgba(7,16,15,.5)}
.loadbox-h{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--dim);text-align:center}
.loadbtn{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink);
  font-family:var(--mono);font-size:12px;padding:9px 12px;border-radius:9px;cursor:pointer;flex:1}
.loadbtn:hover{border-color:var(--green);background:rgba(43,227,162,.1)}

/* prompt: negocjacja + zadanie placówki */
.prow{display:flex;gap:8px;justify-content:center}
.btn.nego{background:rgba(255,210,74,.16);color:var(--gold);border:1px solid var(--gold);font-size:12px}
.ptask{font-family:var(--mono);font-size:11px;color:var(--amber);margin-bottom:7px;max-width:330px}
.ptask:empty{display:none}

/* panel admina */
#adminGate{z-index:40}
#admin{position:fixed;top:10px;right:10px;bottom:10px;width:312px;max-width:92vw;z-index:22;display:none;
  flex-direction:column;background:rgba(6,13,12,.97);border:1px solid var(--line);border-radius:12px;
  font-family:var(--mono);overflow:hidden}
.admin-h{display:flex;align-items:center;gap:6px;padding:9px 11px;border-bottom:1px solid var(--line);font-size:12px}
.agrow{flex:1}
#adminBody,#adminFacEdit{overflow:auto;padding:8px 11px}
#adminBody{flex:1}
#adminFacEdit{border-bottom:1px solid var(--line);max-height:46%}
#adminFacEdit:empty{display:none}
.asec{margin:2px 0 10px}
.asec-h{font-size:9px;letter-spacing:.14em;color:var(--gold);margin:7px 0 5px;text-transform:uppercase}
.afield{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0;font-size:11px;color:var(--dim)}
.afield input,.afield select{width:120px;background:rgba(7,16,15,.8);border:1px solid var(--line);color:var(--ink);
  border-radius:6px;padding:4px 6px;font-family:var(--mono);font-size:11px}
.arow{display:flex;align-items:center;gap:6px;margin:5px 0}
.arow-nm{flex:1;font-size:11px;color:var(--ink)}
.amini{display:flex;align-items:center;gap:3px}
.amini input{width:58px;background:rgba(7,16,15,.8);border:1px solid var(--line);color:var(--ink);
  border-radius:6px;padding:3px 5px;font-family:var(--mono);font-size:11px}
.amini span{font-size:9px;color:var(--dim)}
.afac{display:flex;justify-content:space-between;gap:8px;width:100%;text-align:left;background:transparent;
  border:1px solid var(--line);border-radius:7px;color:var(--ink);font-family:var(--mono);font-size:11px;
  padding:6px 8px;margin:3px 0;cursor:pointer}
.afac:hover{border-color:var(--green)}
.afac-r{color:var(--dim);white-space:nowrap}
.abtn{background:rgba(43,227,162,.12);border:1px solid var(--line);color:var(--ink);border-radius:7px;
  font-family:var(--mono);font-size:11px;padding:5px 9px;cursor:pointer}
.abtn:hover{border-color:var(--green)}
.abtn.danger{background:rgba(255,71,87,.14);border-color:#FF4757;color:#ffb3ba;width:100%;margin-top:6px}

/* quest — panel gracza */
#quest{position:fixed;left:50%;bottom:210px;transform:translateX(-50%);display:none;z-index:6;
  background:rgba(6,13,12,.94);border:1px solid var(--line);border-radius:12px;padding:11px 14px;
  max-width:340px;width:max-content;text-align:center;font-family:var(--mono)}
.q-h{font-size:12px;color:var(--ink);margin-bottom:8px;line-height:1.45}
.q-list{color:var(--dim);font-size:11px}
.q-input{width:100%;background:rgba(7,16,15,.8);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:8px;font-family:var(--mono);font-size:12px;margin-bottom:7px}
.q-btn{width:100%;font-size:12px;padding:9px}
.q-msg{font-size:10px;color:var(--amber);margin-top:6px;min-height:12px}
.q-timer{font-size:26px;font-weight:800;color:var(--gold)}
.q-rw{font-size:10px;color:var(--green);margin-top:8px}

/* quest — estetyczne menu w adminie */
.qed{margin-top:8px;border-top:1px solid var(--line);padding-top:8px}
.qseg{display:flex;gap:4px;margin:4px 0 8px}
.qseg-b{flex:1;background:rgba(7,16,15,.7);border:1px solid var(--line);color:var(--dim);
  border-radius:7px;font-family:var(--mono);font-size:10px;padding:6px 4px;cursor:pointer}
.qseg-b.on{border-color:var(--green);color:var(--ink);background:rgba(43,227,162,.14)}
.qed-rh{font-size:9px;letter-spacing:.14em;color:var(--gold);text-transform:uppercase;margin:9px 0 4px}
.qvisit{max-height:130px;overflow:auto;display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:7px;padding:6px}
.qvchk{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink);cursor:pointer}
.qvchk input{width:auto}

/* auto-chowanie paneli informacyjnych po 5 s bezczynności */
#sidebar,#goalw,#top,.hint,.attr{transition:opacity .45s ease}
body.hud-idle #sidebar,body.hud-idle #goalw,body.hud-idle #top,
body.hud-idle .hint,body.hud-idle .attr{opacity:0;pointer-events:none}