/* ============ Pannello di progressione + pecorella Bea ============ */

/* ------------------------------------------------------- HUD ---- */
.hud{position:fixed;top:0;right:0;height:100vh;z-index:60;font-family:system-ui,-apple-system,sans-serif;
  pointer-events:none}
.hud-tab{pointer-events:auto;position:absolute;right:0;top:96px;transform:translateX(0);
  background:#2f2723;color:#f7f0e6;border:0;border-radius:12px 0 0 12px;padding:16px 11px;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;
  box-shadow:-4px 0 18px rgba(47,39,35,.18)}
.hud-tab-num{font-size:.95rem;font-weight:700;letter-spacing:-.02em}
.hud-tab-txt{writing-mode:vertical-rl;font-size:.62rem;letter-spacing:.22em;opacity:.7}
.hud-tab:hover{background:#40352f}
.hud-tab.flash{animation:hudflash .7s ease 2}
@keyframes hudflash{0%,100%{background:#2f2723}50%{background:#3f7d4e}}

.hud-pan{pointer-events:auto;width:min(430px,92vw);height:100vh;background:#fffdfa;
  border-left:1px solid #e9dfd2;box-shadow:-10px 0 40px rgba(47,39,35,.13);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1)}
.hud.aperto .hud-pan{transform:translateX(0)}
.hud.aperto .hud-tab{transform:translateX(calc(-1 * min(430px,92vw)))}
.hud-tab{transition:transform .26s cubic-bezier(.4,0,.2,1)}

.hud-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:20px 22px 12px;border-bottom:1px solid #f0e8dc}
.hud-head h2{margin:0;font-size:1.05rem;font-family:inherit}
.hud-head p{margin:2px 0 0;font-size:.8rem;color:#7a6c62}
.hud-chiudi{border:0;background:none;font-size:1.5rem;line-height:1;cursor:pointer;color:#9b8d82}
.hud-barra{height:3px;background:#f0e8dc}
.hud-barra i{display:block;height:100%;background:linear-gradient(90deg,#b4462f,#3f7d4e);
  width:0;transition:width .5s ease}
.hud-schede{display:flex;gap:4px;padding:10px 16px 0;border-bottom:1px solid #f0e8dc}
.hud-schede button{border:0;background:none;font:inherit;font-size:.83rem;color:#7a6c62;
  padding:8px 12px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.hud-schede button.attiva{color:#2f2723;border-color:#b4462f;font-weight:600}
.pill{background:#f0e8dc;border-radius:999px;padding:1px 7px;font-size:.7rem;margin-left:4px}
.hud-body{flex:1;overflow-y:auto;padding:14px 16px 24px}
.hud-foot{border-top:1px solid #f0e8dc;padding:11px 18px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;font-size:.76rem;color:#7a6c62}
.hud-foot .spia{display:inline-flex;align-items:center;gap:7px;width:auto;height:auto;
  border-radius:0;background:none}
.hud-foot .spia::before{content:'';width:8px;height:8px;border-radius:50%;background:#c9beb2}
.hud-foot .spia.verde::before{background:#3f7d4e}
.hud-foot .spia.gialla::before{background:#c99a2e}
.hud-foot .spia.rossa::before{background:#b4462f}
.mini{border:1px solid #e9dfd2;background:#fff;border-radius:8px;padding:5px 10px;
  font:inherit;font-size:.74rem;cursor:pointer;color:#7a6c62}
.mini:hover{color:#b4462f;border-color:#e6c4bb}

/* ---------------------------------------------------- livelli --- */
.livelli{list-style:none;margin:0;padding:0}
.liv{border:1px solid #efe6da;border-radius:11px;margin-bottom:7px;background:#fff;overflow:hidden}
.liv.corrente{border-color:#b4462f;box-shadow:0 0 0 3px rgba(180,70,47,.07)}
.liv.ok{background:#fbfdfb;border-color:#dceadf}
.liv-testa{display:grid;grid-template-columns:20px 22px 1fr auto 14px;gap:9px;align-items:center;
  padding:11px 13px;cursor:pointer}
.liv-testa:hover{background:#faf6f0}
.liv-icona{font-size:.72rem;color:#c9beb2}
.liv.ok .liv-icona{color:#3f7d4e} .liv.ko .liv-icona{color:#c99a2e}
.liv-n{font-size:.72rem;color:#9b8d82;font-variant-numeric:tabular-nums}
.liv-tit{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.liv-tit b{font-size:.87rem;font-weight:600}
.liv-tit i{font-style:normal;font-size:.72rem;color:#7a6c62}
.liv-tit code{background:#f2ece3;font-size:.95em}
.liv-tent{font-size:.68rem;color:#9b8d82;background:#f5efe6;border-radius:999px;padding:2px 7px}
.liv-freccia{color:#c9beb2;transition:transform .2s}
.liv.aperto .liv-freccia{transform:rotate(90deg)}
.liv-corpo{padding:4px 15px 16px;border-top:1px solid #f2ebe0;font-size:.82rem;color:#5a4d45}
.liv-corpo h5{margin:14px 0 5px;font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:#9b8d82}
.liv-obb{margin:11px 0 6px;line-height:1.55}
.liv-dove{margin:0;color:#7a6c62}
.liv-passi,.liv-check{margin:0;padding-left:19px;line-height:1.55}
.liv-passi li,.liv-check li{margin-bottom:4px}

/* ---------------------------------------------------- referto --- */
.referto{width:100%;border-collapse:collapse;font-size:.76rem}
.referto td{padding:6px 5px;border-top:1px solid #f2ebe0;vertical-align:top}
.referto tr.ok .r-i{color:#3f7d4e} .referto tr.ko .r-i{color:#b4462f}
.r-i{width:14px;font-weight:700}
.r-l{font-weight:500}
.r-l em{display:block;font-style:normal;font-weight:400;color:#a08d80;font-size:.94em;margin-top:2px}
.r-v{text-align:right;white-space:nowrap;font-family:ui-monospace,Menlo,monospace;
  font-size:.94em;color:#7a6c62;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.r-v .freccia{opacity:.4;margin:0 4px}
tr.ko .r-v span:last-child{color:#b4462f}
.nessuno{padding:14px 2px;color:#9b8d82}

/* ---------------------------------------------------- console --- */
.console{list-style:none;margin:0;padding:0;font-size:.75rem}
.cs{display:grid;grid-template-columns:58px 62px 1fr auto;gap:7px;align-items:baseline;
  padding:8px 6px;border-bottom:1px solid #f4eee5}
.cs-t{color:#b1a396;font-variant-numeric:tabular-nums;font-size:.92em}
.cs-tag{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;text-align:center;
  border-radius:5px;padding:2px 4px;background:#f0e8dc;color:#7a6c62}
.cs-tag.ga4{background:#e2f0e4;color:#3f7d4e}
.cs code{background:none;padding:0;font-size:.98em;color:#2f2723}
.cs-meta{grid-column:3;font-size:.92em;color:#9b8d82}
.cs-stato{font-size:.68rem;color:#b1a396;text-align:right}
.cs.push:not(.abbinato) .cs-stato{color:#c99a2e}
.cs.push.abbinato .cs-stato{color:#3f7d4e}

/* ----------------------------------------------------- premio --- */
.premio{background:linear-gradient(160deg,#fff8ec,#fdeede);border:1px solid #f0dcc0;
  border-radius:13px;padding:22px;text-align:center;margin-bottom:16px}
.premio-emoji{font-size:2.2rem}
.premio h3{margin:6px 0 4px;font-size:1.1rem}
.premio p{margin:5px 0;font-size:.82rem;color:#7a6c62}
.codice{display:block;margin-top:10px;font-size:1.15rem;letter-spacing:.13em;font-weight:700;
  background:#2f2723;color:#ffe9c9;border-radius:9px;padding:12px}

/* -------------------------------------------------------- Bea --- */
.bea{position:fixed;left:22px;bottom:22px;z-index:55;display:flex;align-items:flex-end;gap:12px}
.bea-avatar{border:0;background:none;padding:0;cursor:pointer;width:118px;filter:drop-shadow(0 6px 14px rgba(69,48,35,.2));
  transition:transform .2s ease}
.bea-avatar:hover{transform:translateY(-4px) rotate(-2deg)}
.bea-svg{width:100%;display:block}
.bea-bolla{order:2;max-width:330px;background:#fffdfa;border:1px solid #e9dfd2;border-radius:16px;
  padding:15px 34px 15px 17px;box-shadow:0 10px 30px rgba(69,48,35,.15);position:relative;
  font-family:system-ui,sans-serif;font-size:.83rem;line-height:1.55;color:#3b3029}
.bea-bolla::before{content:'';position:absolute;left:-8px;bottom:26px;width:14px;height:14px;
  background:#fffdfa;border-left:1px solid #e9dfd2;border-bottom:1px solid #e9dfd2;transform:rotate(45deg)}
.bea-bolla p{margin:0}
.bea-bolla code{background:#f2ece3;font-size:.93em}
.bea-chiudi{position:absolute;top:6px;right:8px;border:0;background:none;cursor:pointer;
  font-size:1.1rem;color:#b1a396;line-height:1}
.bea-bolla.pop{animation:beapop .28s cubic-bezier(.34,1.56,.64,1)}
@keyframes beapop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .bea{left:12px;bottom:12px}
  .bea-avatar{width:82px}
  .bea-bolla{max-width:min(70vw,290px)}
  .hud-tab{top:auto;bottom:22px}
}