/* ===========================================================
   MINIOPOLIS — UI
   Palette piatta e satura (niente gradient decorativi).
   =========================================================== */
:root{
  --bg:#1b2436;
  --panel:#243149;
  --panel-2:#2d3c59;
  --line:#3a4c70;
  --txt:#eaf0fb;
  --dim:#9fb0cd;
  --gold:#ffc542;
  --green:#3ec46d;
  --red:#ef4d4d;
  --blue:#3aa6f0;
  --purple:#9b6ef3;
  --orange:#ff8a3d;
  --r:14px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--txt);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  user-select:none;-webkit-user-select:none;touch-action:none}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}
#app{position:fixed;inset:0}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;background:#2b7fb3}
.hidden{display:none !important}

/* ---------------- HUD ---------------- */
#hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;
  gap:8px;padding:8px 10px;padding-top:calc(8px + env(safe-area-inset-top,0px));pointer-events:none;z-index:20}
.hud-left,.hud-right{display:flex;gap:6px;align-items:center;flex-wrap:wrap;pointer-events:auto}
.stat{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:6px 10px;font-size:14px;font-weight:700;box-shadow:0 2px 0 #0003}
.stat .ico{font-size:14px;opacity:.95}
#stat-money b{color:var(--gold);min-width:52px;display:inline-block;text-align:right}
#stat-money.neg b{color:var(--red)}
#stat-pop b{color:var(--blue)}
.stat.level{position:relative;padding-right:14px}
.stat.level .xp{position:absolute;left:8px;right:8px;bottom:3px;height:3px;background:#0004;border-radius:2px;overflow:hidden}
.stat.level .xp i{display:block;height:100%;width:0;background:var(--gold);border-radius:2px;transition:width .4s}
.speed{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.speed button{padding:7px 9px;font-size:11px;color:var(--dim);letter-spacing:-1px}
.speed button.on{background:var(--blue);color:#fff}
.icon-btn{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  width:38px;height:36px;font-size:17px;display:flex;align-items:center;justify-content:center}

/* ---------------- Side (RCI, meters, overlay) ---------------- */
#side{position:absolute;right:10px;top:96px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;z-index:15}
#rci,#meters{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px}
.rci-row,.meter{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800}
.rci-row span{width:12px;text-align:center;color:var(--dim)}
.rci-row .bar{width:56px;height:8px;background:#0005;border-radius:4px;position:relative;overflow:hidden}
.rci-row .bar i{position:absolute;top:0;bottom:0;left:50%;width:0;background:var(--green);border-radius:3px;transition:all .5s}
.rci-row .bar i.neg{background:var(--red)}
.meter .bar{width:56px;height:8px;background:#0005;border-radius:4px;overflow:hidden}
.meter .bar i{display:block;height:100%;width:0%;background:var(--green);transition:width .5s}
.meter .bar i.warn{background:var(--orange)}
.meter .bar i.bad{background:var(--red)}
.meter.alert{animation:meterAlert 1.1s ease-in-out infinite}
.meter.alert span{filter:drop-shadow(0 0 4px var(--red))}
@keyframes meterAlert{0%,100%{opacity:1}50%{opacity:.45}}
#overlays{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
#overlays button{padding:7px 8px;font-size:15px;opacity:.5;line-height:1}
#overlays button.on{background:var(--panel-2);opacity:1}

/* ---------------- Eventi ---------------- */
#eventlist{position:absolute;left:10px;top:96px;display:flex;flex-direction:column;gap:6px;z-index:15;max-width:46vw}
.evt{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--red);border-radius:10px;padding:7px 10px;font-size:12px;font-weight:700;
  cursor:pointer;animation:pop .25s ease-out;box-shadow:0 2px 0 #0003}
.evt.quest{border-left-color:var(--purple)}
.evt.good{border-left-color:var(--green)}
.evt .e-ico{font-size:16px}
.evt small{display:block;font-weight:500;color:var(--dim);font-size:10px}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}

#toasts{position:absolute;left:50%;transform:translateX(-50%);bottom:150px;display:flex;flex-direction:column;
  gap:6px;align-items:center;z-index:30;pointer-events:none;width:92%;max-width:420px}
.toast{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-size:13px;
  font-weight:700;box-shadow:0 4px 12px #0006;animation:toastIn .3s ease-out;text-align:center}
.toast.good{border-color:var(--green);color:#b9f7cf}
.toast.bad{border-color:var(--red);color:#ffc9c9}
.toast.gold{border-color:var(--gold);color:#ffe8ab}
@keyframes toastIn{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}

.stat.tier{font-size:12px;font-weight:800;color:var(--gold);padding:6px 9px}
.icon-btn.alert{box-shadow:0 0 0 2px var(--gold) inset}

/* ---------------- Progetto in corso ---------------- */
#projbar{position:absolute;left:50%;transform:translateX(-50%);top:calc(56px + env(safe-area-inset-top,0px));
  background:var(--panel);border:1px solid var(--purple);border-radius:12px;padding:6px 14px;z-index:19;
  display:flex;flex-direction:column;gap:3px;min-width:220px;cursor:pointer;box-shadow:0 3px 10px #0005}
#projbar b{font-size:12.5px}
#projbar small{font-size:10.5px;color:var(--dim)}
.pbar{height:4px;background:#0005;border-radius:3px;overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:var(--purple);transition:width .5s}

/* ---------------- Progetti e cronaca (dentro la modale) ---------------- */
.proj{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 0}
.proj.done{opacity:.55}
.proj.on{border-color:var(--purple)}
.proj b{font-size:13.5px;display:block}
.proj small{display:block;color:var(--dim);font-size:11.5px;line-height:1.45;margin:3px 0 6px}
.prow{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;font-weight:700}
.prow .ok{color:#7ff0a8}
.prow .no{color:#ff9a9a;text-align:right;font-weight:600}
.prow button{background:var(--blue);color:#06233d;border-radius:9px;padding:6px 14px;font-weight:800;font-size:12px}
.news{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid #ffffff12;font-size:12.5px;line-height:1.45}
.news span{font-size:17px;line-height:1.2}
.news b{font-size:11px;color:var(--dim);font-weight:700}
.news.good{color:#c6f0d6}
.news.bad{color:#ffcccc}
.dtag{background:var(--panel-2);border-radius:9px;padding:6px 10px;font-size:12px;margin:0 0 8px}

/* ---------------- Minimappa ---------------- */
#minimap{position:absolute;right:10px;bottom:calc(72px + var(--safe-b));z-index:18;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:4px;
  box-shadow:0 3px 10px #0005;line-height:0}
#minimap canvas{width:146px;height:146px;border-radius:8px;display:block;cursor:crosshair;
  image-rendering:pixelated}
body.pal-open #minimap{bottom:calc(206px + var(--safe-b))}
@media (max-width:640px){ #minimap{left:10px;right:auto} }
@media (max-width:520px){ #minimap canvas{width:104px;height:104px} }
@media (max-height:520px){ #minimap{display:none} }

/* ---------------- Toolbar strumento ---------------- */
#toolbar{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(150px + var(--safe-b));
  display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--blue);
  border-radius:12px;padding:6px 8px 6px 14px;z-index:25;box-shadow:0 4px 12px #0006}
#toolbar .tool-name{display:flex;flex-direction:column;line-height:1.2}
#toolbar b{font-size:13px}
#toolbar small{color:var(--gold);font-size:11px;font-weight:700}
#tool-cancel{width:28px;height:28px;border-radius:8px;background:var(--panel-2);font-size:13px}

/* ---------------- Dock + palette ---------------- */
#dock{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;gap:2px;
  background:var(--panel);border-top:1px solid var(--line);padding:6px 4px calc(6px + var(--safe-b));z-index:22}
#dock button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 4px;border-radius:10px;flex:1;max-width:84px}
#dock button span{font-size:18px;line-height:1}
#dock button small{font-size:9px;color:var(--dim);font-weight:700;letter-spacing:.1px}
#dock button.on{background:var(--panel-2)}
#dock button.on small{color:var(--txt)}

#palette{position:absolute;left:0;right:0;bottom:calc(62px + var(--safe-b));z-index:21;
  background:var(--panel);border-top:1px solid var(--line);padding:10px;
  display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.pal{flex:0 0 auto;width:96px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.pal canvas{width:64px;height:48px;image-rendering:auto}
.pal .n{font-size:10.5px;font-weight:800;line-height:1.15;height:26px;display:flex;align-items:center}
.pal .c{font-size:11px;font-weight:800;color:var(--gold)}
.pal.locked{opacity:.42}
.pal.locked .c{color:var(--dim)}
.pal.sel{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.pal.cant .c{color:var(--red)}

/* ---------------- Modale ---------------- */
#modal{position:absolute;inset:0;background:#0009;z-index:40;display:flex;align-items:center;justify-content:center;padding:14px}
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:18px;width:100%;max-width:440px;
  max-height:86vh;display:flex;flex-direction:column;box-shadow:0 12px 40px #000a;animation:pop .2s ease-out}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px}
.sheet-head h2{margin:0;font-size:17px}
#modal-x{width:30px;height:30px;border-radius:9px;background:var(--panel-2)}
.sheet-body{padding:4px 16px 12px;overflow:auto;font-size:13.5px;line-height:1.5;color:#dbe5f5}
.sheet-foot{padding:10px 16px calc(14px + var(--safe-b));display:flex;gap:8px;flex-wrap:wrap}
.sheet-foot button,.splash-btns button{flex:1;min-width:120px;padding:12px;border-radius:12px;background:var(--panel-2);
  border:1px solid var(--line);font-weight:800;font-size:13.5px}
.sheet-foot button.primary,.splash-btns button.primary{background:var(--blue);border-color:var(--blue);color:#06233d}
.sheet-foot button.danger{background:var(--red);border-color:var(--red);color:#2a0606}
.sheet-body table{width:100%;border-collapse:collapse;font-size:13px}
.sheet-body td{padding:5px 0;border-bottom:1px solid #ffffff12}
.sheet-body td:last-child{text-align:right;font-weight:800}
.sheet-body .pos{color:#7ff0a8}.sheet-body .neg{color:#ff9a9a}
.sheet-body h3{margin:14px 0 6px;font-size:13px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px}
.slider{width:100%;margin:6px 0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:5px 10px;font-size:11.5px;font-weight:700}
.chip.ok{border-color:var(--green);color:#b9f7cf}
.chip.no{border-color:var(--red);color:#ffc9c9}

/* ---------------- Splash ---------------- */
#splash{position:absolute;inset:0;background:#141c2b;z-index:60;display:flex;align-items:center;justify-content:center;padding:18px}
.splash-card{max-width:440px;text-align:center}
.splash-card h1{font-size:40px;margin:0 0 6px;letter-spacing:4px;color:var(--gold);text-shadow:0 4px 0 #0006}
.tag{color:var(--dim);font-size:14px;line-height:1.55;margin:0 0 20px}
.splash-btns{display:flex;flex-direction:column;gap:9px}
.hint{color:#6d7f9d;font-size:11.5px;margin-top:18px;line-height:1.6}

/* Su telefono l'HUD va a capo su due o tre righe: tutto ciò che sta
   sotto deve scendere di conseguenza, altrimenti la lista degli eventi
   finisce sotto i contatori. */
@media (max-width:760px){
  #side{top:calc(128px + env(safe-area-inset-top,0px))}
  #eventlist{top:calc(128px + env(safe-area-inset-top,0px));max-height:34vh;overflow:hidden}
  /* la barra del progetto scende sotto l'HUD e spinge giù gli eventi,
     ma solo quando c'è davvero un progetto in corso */
  #projbar{top:calc(126px + env(safe-area-inset-top,0px));min-width:0;width:min(90vw,340px)}
  body.proj-on #eventlist{top:calc(190px + env(safe-area-inset-top,0px));max-height:28vh}
}
@media (max-width:520px){
  .stat{padding:5px 8px;font-size:12.5px}
  .stat.tier{font-size:11px;padding:5px 7px}
  #eventlist{max-width:62vw;max-height:28vh}
  .evt{padding:6px 8px;font-size:11.5px}
  .splash-card h1{font-size:32px}
  #dock button small{font-size:8.5px}
}
@media (max-width:430px){
  .stat.tier b{display:none}
  .icon-btn{width:34px;height:32px;font-size:15px}
  .speed button{padding:6px 7px}
}