/* ============================================================
   HIT PARADE HYSTERIA — stile 16-bit (C64/Amiga tabloid)
   ============================================================ */
:root{
  --bg:#0d0b1e;
  --panel:#1a1633;
  --panel2:#241d47;
  --ink:#e8e4ff;
  --dim:#9a90c9;
  --yellow:#ffd83d;
  --orange:#ff8c2e;
  --pink:#ff4fa3;
  --cyan:#3de8ff;
  --green:#4dff6a;
  --red:#ff4d5e;
  --purple:#8c5bff;
  --border:#4a3f8c;
  --shadow:#050410;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{height:100%; min-height:100dvh;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Press Start 2P","Courier New",monospace;
  font-size:11px;
  line-height:1.7;
  image-rendering:pixelated;
  overflow:hidden;
}
body[data-era="70s"]{--bg:#21170f;--panel:#3a2818;--panel2:#553b20;--border:#b57635;--cyan:#b6dfb0;--purple:#8a5938;}
body[data-era="80s"]{--bg:#0d0b1e;--panel:#1a1633;--panel2:#241d47;--border:#4a3f8c;}
body[data-era="90s"]{--bg:#101b2b;--panel:#142d43;--panel2:#1b4155;--border:#2f8ca6;--pink:#ef619d;--yellow:#f6d35c;}
body[data-era="00s"]{--bg:#172026;--panel:#22323b;--panel2:#2a434b;--border:#4a9391;--purple:#6388c8;--orange:#ff9c4b;}
body[data-era="10s"]{--bg:#141826;--panel:#202641;--panel2:#2b3150;--border:#6374d5;--cyan:#5fe3ff;--pink:#ff69a9;}
body[data-era="20s"]{--bg:#101922;--panel:#182936;--panel2:#203b49;--border:#55a5b8;--cyan:#74f4dc;--purple:#8471e8;}

/* Le ere restano lo stesso gioco, ma cambiano il supporto che lo racconta. */
body[data-era="70s"]{background-image:repeating-linear-gradient(0deg,rgba(255,228,174,.025) 0 1px,transparent 1px 4px);}
body[data-era="70s"] #hdr,body[data-era="70s"] #status{box-shadow:inset 0 -2px 0 rgba(255,225,170,.16);}
body[data-era="70s"] .panel{box-shadow:4px 4px 0 #1b1009, inset 0 0 0 1px rgba(255,225,170,.14);}
body[data-era="90s"]{background-image:linear-gradient(rgba(77,185,211,.025) 50%,transparent 50%);background-size:100% 4px;}
body[data-era="90s"] #hdr .logo{text-shadow:2px 0 var(--pink),-2px 0 var(--cyan),5px 5px 0 var(--shadow);}
body[data-era="00s"] #hdr,body[data-era="00s"] #status{background:linear-gradient(135deg,var(--panel2),var(--panel) 48%,var(--panel2));}
body[data-era="00s"] .panel{border-color:color-mix(in srgb,var(--border) 78%,#d0fbf6);box-shadow:5px 5px 0 var(--shadow),inset 0 1px rgba(230,255,255,.16);}
body[data-era="10s"] #nav{background:linear-gradient(90deg,var(--panel2),color-mix(in srgb,var(--panel2) 72%,var(--purple)));}
body[data-era="10s"] .panel,body[data-era="20s"] .panel{box-shadow:0 5px 0 var(--shadow),0 0 0 1px color-mix(in srgb,var(--border) 48%,transparent);}
body[data-era="20s"]{background-image:radial-gradient(circle at 8% 0,rgba(116,244,220,.08),transparent 28%),linear-gradient(145deg,var(--bg),#0b121a);}
body[data-era="20s"] #nav button.on{box-shadow:inset 0 -3px var(--cyan);}
button, input, select{font-family:inherit; font-size:inherit;}
button:focus-visible,input:focus-visible,.combo-box:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;}
.text-input{width:100%;background:#100d24;color:var(--ink);border:3px solid var(--border);padding:8px;min-height:44px;}
.team-role{border-top:1px dashed var(--border);margin-top:9px;padding-top:5px;}
.team-controls{display:grid;grid-template-columns:minmax(110px,1fr) minmax(100px,1fr);gap:6px;align-items:center;margin-top:6px;}
.team-controls .btn{margin:0;}
.causal-panel .small{margin-top:5px;}
input[type="range"]{width:100%;min-height:44px;accent-color:var(--yellow);}

/* barre a righe stile caricamento C64 */
.stripes{
  height:8px;
  background:repeating-linear-gradient(90deg,
    var(--pink) 0 12px, var(--yellow) 12px 24px, var(--cyan) 24px 36px,
    var(--green) 36px 48px, var(--orange) 48px 60px, var(--purple) 60px 72px);
}

#app{height:100%; height:100dvh; display:flex; flex-direction:column; max-width:980px; margin:0 auto;}

/* ---------- header ---------- */
#hdr{
  background:var(--panel);
  border-bottom:4px solid var(--shadow);
  padding:6px 10px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  flex-wrap:wrap;
}
#hdr .logo{
  color:var(--yellow);
  text-shadow:3px 3px 0 var(--pink), 6px 6px 0 var(--shadow);
  font-size:15px; letter-spacing:1px;
}
#hdr .date{color:var(--cyan); font-size:10px; text-align:right;}

/* ---------- nav ---------- */
#nav{display:flex; background:var(--panel2); border-bottom:4px solid var(--shadow); overflow-x:auto;}
#nav button{
  flex:1 0 auto;
  background:none; border:none; color:var(--dim);
  padding:9px 10px; cursor:pointer; font-size:9px;
  min-height:44px;
  border-right:2px solid var(--shadow);
  white-space:nowrap;
  position:relative;
}
#nav button.on{background:var(--purple); color:#fff;}
#nav button .badge{
  position:absolute; top:2px; right:2px;
  background:var(--red); color:#fff; font-size:8px;
  padding:1px 4px; border-radius:0;
}

/* ---------- fumetto manager ---------- */
#bubble{
  margin:8px 10px 0; padding:8px 12px;
  background:#fff; color:#111;
  border:3px solid #111;
  box-shadow:4px 4px 0 var(--shadow);
  font-size:10px; line-height:1.6;
  position:relative;
  display:none;
}
#bubble.show{display:block;}
#bubble:after{
  content:""; position:absolute; left:24px; bottom:-12px;
  border:6px solid transparent; border-top-color:#111;
}

/* ---------- main ---------- */
#main{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:10px max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); -webkit-overflow-scrolling:touch;}

.panel{
  background:var(--panel);
  border:3px solid var(--border);
  box-shadow:5px 5px 0 var(--shadow);
  padding:10px;
  margin-bottom:12px;
}
.panel h2{
  font-size:11px; color:var(--yellow);
  border-bottom:2px solid var(--border);
  padding-bottom:6px; margin-bottom:8px;
  text-transform:uppercase;
}
.panel h3{font-size:10px; color:var(--cyan); margin:8px 0 4px;}
.small{font-size:9px; color:var(--dim);}
.hl{color:var(--yellow);}
.good{color:var(--green);}
.bad{color:var(--red);}
.cy{color:var(--cyan);}
.pk{color:var(--pink);}

/* bottoni */
.btn{
  display:inline-block;
  background:var(--purple); color:#fff;
  border:none; border-bottom:4px solid #4a2c99; border-right:4px solid #4a2c99;
  padding:8px 12px; margin:3px 4px 3px 0;
  cursor:pointer; font-size:10px;
  text-transform:uppercase;
}
.btn:active{transform:translate(2px,2px); border-bottom-width:2px; border-right-width:2px;}
.btn.y{background:var(--yellow); color:#221a00; border-color:#a8880a;}
.btn.g{background:var(--green); color:#03270b; border-color:#1d8c35;}
.btn.r{background:var(--red); border-color:#8c1d28;}
.btn.c{background:var(--cyan); color:#00252b; border-color:#1d8c9c;}
.btn.dim{background:#3a3560; color:var(--dim); border-color:#221e3d;}
.btn:disabled{opacity:.4; cursor:not-allowed;}
.btn.sm{padding:5px 8px; font-size:9px;}
button, input, select, .combo-box{touch-action:manipulation;}

/* barre statistiche */
.statrow{display:flex; align-items:center; gap:6px; margin:3px 0; font-size:9px;}
.statrow .lbl{width:110px; color:var(--dim); flex-shrink:0;}
.bar{flex:1; height:12px; background:#100d24; border:2px solid var(--border); position:relative;}
.bar i{position:absolute; inset:0; background:var(--green); width:50%;}
.bar i.warn{background:var(--orange);}
.bar i.crit{background:var(--red);}
.bar i.blue{background:var(--cyan);}
.bar i.pink{background:var(--pink);}
.statrow .val{width:34px; text-align:right; font-size:9px;}

/* tabelle */
table{width:100%; border-collapse:collapse; font-size:9px;}
th{color:var(--yellow); text-align:left; padding:4px 6px; border-bottom:2px solid var(--border);}
td{padding:4px 6px; border-bottom:1px solid #2a2450;}
tr.me td{background:#3a2c6b; color:var(--yellow);}
tr.hist td .hname{color:var(--pink);}
.chart-table{table-layout:fixed;}
.chart-table th:nth-child(1),.chart-table td:nth-child(1){width:7%;}
.chart-table th:nth-child(2),.chart-table td:nth-child(2){width:27%;}
.chart-table th:nth-child(3),.chart-table td:nth-child(3){width:27%;}
.chart-table th:nth-child(4),.chart-table td:nth-child(4){width:22%;}
.chart-table th:nth-child(5),.chart-table td:nth-child(5){width:17%;}
.chart-table td{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.chart-table .cart-n{display:inline-block; max-width:calc(100% - 30px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle;}

/* status bar in basso */
#status{
  background:var(--panel2);
  border-top:4px solid var(--shadow);
  display:flex; align-items:center; gap:10px;
  padding:6px 10px;
  font-size:9px;
}
#status canvas{border:3px solid var(--border); background:#000; width:52px; height:52px; flex-shrink:0;}
#status .col{display:flex; flex-direction:column; gap:2px; min-width:0;}
#status .cash{color:var(--green); font-size:12px;}
#status .cash.neg{color:var(--red);}
#status .fans{color:var(--cyan);}
#status .aname{color:var(--yellow); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px;}
#status .spacer{flex:1;}
#status .cal{
  background:#fff; color:#111; text-align:center;
  border:3px solid #111; padding:3px 8px; line-height:1.3; flex-shrink:0;
}
#status .cal .wk{font-size:13px;}
#endweek{font-size:11px; padding:10px 14px;}

/* azioni settimana */
.slots{display:flex; gap:6px; margin-bottom:8px;}
.slot{width:22px; height:22px; border:3px solid var(--border); background:#100d24;}
.slot.full{background:var(--yellow); border-color:#a8880a;}

.actgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px;}
.actgrid .btn{margin:0; padding:12px 8px; text-align:center;}
.agenda-grid{display:grid;grid-template-columns:repeat(14,minmax(70px,1fr));gap:4px;overflow-x:auto;margin-top:8px;padding-bottom:3px;}
.agenda-day{min-height:64px;border:2px solid var(--border);background:var(--panel2);color:var(--ink);padding:4px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:1px;}
.agenda-day b{font-size:8px;color:var(--cyan);text-transform:uppercase;}.agenda-day span{font-size:13px;color:var(--yellow);}.agenda-day em{font-style:normal;font-size:7px;line-height:1.35;color:var(--dim);overflow:hidden;}.agenda-day.today{outline:3px solid var(--yellow);}.agenda-day.sunday{border-color:var(--orange);}.agenda-day.booked,.agenda-day.tour,.agenda-day.busy{background:#30254e;}.agenda-day.release{border-color:var(--green);}.agenda-day.contest{border-color:var(--pink);}.agenda-day.deadline{border-color:var(--orange);}.agenda-day.preview{background:var(--purple);box-shadow:inset 0 0 0 2px var(--cyan);}.agenda-day:disabled{opacity:1;cursor:default;}
@media(max-width:600px){.agenda-grid{grid-template-columns:repeat(14,76px);}.agenda-strip{overflow:hidden;}}

/* offerte */
.offer{
  border:2px dashed var(--orange);
  padding:8px; margin:8px 0;
  background:#241a33;
  font-size:9px;
}
.offer .t{color:var(--orange); font-size:10px; margin-bottom:4px; text-transform:uppercase;}

/* news feed */
.news{margin:6px 0; padding:6px 8px; font-size:9px; border-left:4px solid var(--cyan); background:#151130;}
.news.tabloid{border-color:var(--pink);}
.news.manager{border-color:var(--yellow); font-style:italic;}
.news .w{color:var(--dim); margin-right:6px;}

/* modal */
#modal-wrap{
  position:fixed; inset:0; background:rgba(5,4,16,.85);
  display:none; align-items:center; justify-content:center; z-index:50; padding:16px;
}
#modal-wrap.show{display:flex;}
#modal{
  background:var(--panel);
  border:4px solid var(--yellow);
  box-shadow:8px 8px 0 var(--shadow);
  max-width:560px; width:100%; max-height:85vh; overflow-y:auto;
  padding:14px;
}
#modal h2{color:var(--yellow); font-size:12px; margin-bottom:10px; text-transform:uppercase;}
#modal .txt{font-size:10px; margin-bottom:12px; line-height:1.8;}
#modal .choices .btn{display:block; width:100%; margin:6px 0; text-align:left; text-transform:none;}
.media-stamp{font-size:8px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;border-bottom:1px dashed var(--border);padding-bottom:5px;margin-bottom:7px;}
body[data-era="70s"] #modal{border-style:double;}body[data-era="90s"] #modal{border-radius:8px;}body[data-era="10s"] #modal,body[data-era="20s"] #modal{box-shadow:0 0 0 2px var(--border),8px 8px 0 var(--shadow);}

/* schermata titolo */
#title-screen{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:20px; gap:14px;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.25) 3px 4px),
    radial-gradient(ellipse at 50% 30%, #2a2055 0%, var(--bg) 70%);
}
#title-screen h1{
  font-size:26px; color:var(--yellow); line-height:1.4;
  text-shadow:4px 4px 0 var(--pink), 8px 8px 0 var(--shadow);
  animation:flash 2s steps(2) infinite;
}
@keyframes flash{50%{text-shadow:4px 4px 0 var(--cyan), 8px 8px 0 var(--shadow);}}
#title-screen .sub{color:var(--cyan); font-size:10px; max-width:480px;}
#title-screen .credit{color:var(--dim); font-size:8px; margin-top:10px;}

/* wizard */
.wiz label{display:block; color:var(--cyan); font-size:9px; margin:10px 0 4px; text-transform:uppercase;}
.wiz input[type=text], .wiz select{
  width:100%; background:#100d24; color:var(--ink);
  border:3px solid var(--border); padding:8px; font-size:11px;
}
.wiz .opts{display:flex; flex-wrap:wrap; gap:6px;}
.wiz .opt{
  border:3px solid var(--border); background:#100d24; color:var(--dim);
  padding:8px 10px; cursor:pointer; font-size:9px;
}
.wiz .opt.on{border-color:var(--yellow); color:var(--yellow); background:#2a2455;}
.portrait-row{display:flex; gap:8px; flex-wrap:wrap;}
.portrait-row canvas{border:3px solid var(--border); cursor:pointer; width:64px; height:64px; background:#000;}
.portrait-row canvas.on{border-color:var(--yellow);}
/* ritratto in classifica (Fase 9.2) */
td.cart{white-space:nowrap;}
canvas.chart-face{width:22px; height:22px; image-rendering:pixelated; vertical-align:middle; margin-right:5px; border:1px solid var(--border); background:#000;}
.studio-reel{display:flex; align-items:center; gap:5px; margin:9px 0; padding:6px; border:2px solid var(--border); background:#100d24; color:var(--cyan); font-size:8px; overflow:hidden;}
.studio-reel i{display:block; width:9px; height:9px; border-radius:50%; background:var(--pink); animation:reel 1.1s steps(2) infinite; flex-shrink:0;}.studio-reel i:nth-child(2){animation-delay:.18s;}.studio-reel i:nth-child(3){animation-delay:.36s;}
@keyframes reel{50%{background:var(--yellow); transform:rotate(180deg);}}
.studio-status{margin:7px 0; padding:6px; border-left:3px solid var(--cyan); background:#151130; font-size:9px; line-height:1.6;}
.cart-n{vertical-align:middle;}

/* studio elenco tracce */
.track{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  border-bottom:1px solid #2a2450; padding:6px 0; font-size:9px;
}
.track .tt{color:var(--ink); min-width:140px;}
.track .q{color:var(--yellow);}

.tag{display:inline-block; background:var(--border); color:#fff; font-size:8px; padding:1px 5px; margin-left:4px;}
.tag.pk{background:var(--pink);}
.tag.gr{background:var(--green); color:#03270b;}
.tag.or{background:var(--orange); color:#331a00;}

hr{border:none; border-top:2px dashed var(--border); margin:10px 0;}

/* ============================================================
   FASE 29 — UI viva: toast reali, micro-animazioni, conferma custom
   ============================================================ */
/* coda toast in basso, sopra la status bar */
#toasts{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(64px + env(safe-area-inset-bottom));
  z-index:60; display:flex; flex-direction:column; gap:6px;
  width:100%; max-width:440px; padding:0 10px; pointer-events:none;
}
.toast{
  pointer-events:auto; cursor:pointer;
  background:var(--panel); color:var(--ink);
  border:3px solid var(--cyan); border-left-width:6px;
  box-shadow:4px 4px 0 var(--shadow);
  padding:8px 10px; font-size:9px; line-height:1.6;
  animation:toast-in .22s steps(3) both;
}
.toast.out{animation:toast-out .18s steps(3) both;}
.toast.ok{border-color:var(--green);}
.toast.err{border-color:var(--red);}
.toast.info{border-color:var(--cyan);}
@keyframes toast-in{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
@keyframes toast-out{from{opacity:1;} to{opacity:0; transform:translateY(8px);}}

/* micro-animazioni: transizione barre e crossfade del pannello attivo */
.bar i{transition:width .35s ease-out;}
#main.swap{animation:panel-fade .18s ease-out both;}
@keyframes panel-fade{from{opacity:.35; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}
#status .cash, #status .fans{transition:color .2s;}
#status .cash.bump, #status .fans.bump{animation:num-bump .3s steps(2);}
@keyframes num-bump{50%{transform:scale(1.18);}}

/* modale di conferma custom (riusa #modal-wrap) */
#modal .confirm-actions{display:flex; gap:8px; margin-top:14px;}
#modal .confirm-actions .btn{flex:1; margin:0; text-align:center; text-transform:uppercase;}

/* combobox custom in stile 16-bit (Fase 22) — sostituisce il dropdown nativo */
.combo{position:relative; display:inline-block; vertical-align:middle; max-width:100%;}
.combo select{display:none;}
.combo-box{
  background:#100d24; color:var(--ink); border:3px solid var(--border);
  padding:7px 24px 7px 8px; font-size:10px; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; user-select:none;
}
.combo-box::after{content:"\25BE"; position:absolute; right:7px; top:50%; transform:translateY(-50%); color:var(--yellow);}
.combo-box:focus{outline:none; border-color:var(--cyan);}
.combo-box.open{border-color:var(--yellow);}
.combo-box.dis{opacity:.45; cursor:not-allowed;}
.wiz .combo{display:block; width:100%;}
.wiz .combo-box{font-size:11px; padding:8px 26px 8px 8px;}
.combo-pop{
  position:fixed; z-index:9999; background:var(--panel); border:3px solid var(--yellow);
  max-height:210px; overflow-y:auto; box-shadow:4px 4px 0 var(--shadow); image-rendering:pixelated;
}
.combo-opt{padding:7px 10px; font-size:10px; color:var(--ink); cursor:pointer; white-space:nowrap;}
.combo-opt.sel{color:var(--yellow);}
.combo-opt.hi, .combo-opt:hover{background:var(--cyan); color:#00252b;}
.combo-opt.dis{opacity:.4; cursor:not-allowed;}
.combo-opt.dis:hover{background:none; color:var(--ink);}

@media (max-width:600px){
  body{font-size:10px;}
  #hdr .logo{font-size:12px;}
  #status .aname{max-width:90px;}
  .statrow .lbl{width:86px;}
}

@supports (content-visibility:auto){
  @media (max-width:719px){
    #main > .panel{content-visibility:auto; contain-intrinsic-size:auto 180px;}
  }
}

/* ============================================================
   FASE 30 — Tablet/mobile: safe-area iOS, touch target ≥44px,
   breakpoint intermedio a 2 colonne (≥720px)
   ============================================================ */
/* safe-area iOS: header e status bar rispettano le notch/home indicator */
#hdr{padding-top:calc(6px + env(safe-area-inset-top));
  padding-left:calc(10px + env(safe-area-inset-left));
  padding-right:calc(10px + env(safe-area-inset-right));}
#status{padding-bottom:calc(6px + env(safe-area-inset-bottom));
  padding-left:calc(10px + env(safe-area-inset-left));
  padding-right:calc(10px + env(safe-area-inset-right));}
#nav{padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);}

/* target touch: su dispositivi a puntamento grezzo (dito) i controlli
   principali garantiscono almeno 44px di altezza */
@media (pointer:coarse){
  #nav button{min-height:44px;}
  .btn{min-height:44px;}
  .btn.sm{min-height:44px;}
  #modal .choices .btn{min-height:44px;}
  .combo-box{min-height:44px; display:flex; align-items:center;}
  .combo-opt{min-height:40px; display:flex; align-items:center;}
}
@media (max-width:520px){.team-controls{grid-template-columns:1fr;}}

/* breakpoint intermedio tablet: grid esplicita. Il vecchio multi-column
   disponeva i pannelli in colonne verticali oltre la larghezza di #main. */
@media (min-width:720px){
  #main{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    align-content:start;
  }
  #main > .panel{min-width:0; margin-bottom:0;}
  #main > .chart-panel{grid-column:1 / -1;}
}

/* ---------- indicatori diegetici in testata (Fase 43) ---------- */
#status .ind{display:flex; flex-direction:column; gap:2px; margin-left:8px; flex-shrink:0;}
.ind-item{display:flex; align-items:center; gap:4px;}
.ind-item .ind-l{font-size:7px; color:var(--ink); opacity:.75; width:56px;}
.ind-item .ind-d i{
  display:inline-block; width:6px; height:6px; margin-right:2px;
  background:var(--panel2); border:1px solid var(--border);
}
.ind-item .ind-d i.on{background:var(--green); border-color:var(--green);}
.ind-item .ind-d i.on.warn{background:var(--yellow); border-color:var(--yellow);}
.ind-item .ind-d i.on.crit{background:var(--red); border-color:var(--red);}
.ind-item .ind-d i.on.hi5{background:var(--cyan); border-color:var(--cyan);}
@media (max-width:560px){ #status .ind{display:none;} }

/* ---------- manager: avatar + relazione semaforo (Fase 40) ---------- */
.mgr-avatar{border:2px solid var(--border); display:block;}
.mgr-rel{width:72px; height:7px; background:var(--panel2); border:1px solid var(--border); margin-top:3px;}
.mgr-rel i{display:block; height:100%;}
.mgr-rel.verde i{width:100%; background:var(--green);}
.mgr-rel.giallo i{width:55%; background:var(--yellow);}
.mgr-rel.rosso i{width:22%; background:var(--red); animation:relpulse 1.2s ease-in-out infinite;}
@keyframes relpulse{0%,100%{opacity:.5}50%{opacity:1}}
/* replica degli indicatori dentro l'Agenda sui telefoni stretti */
.ind-inline{display:none; margin:4px 0;}
@media (max-width:560px){ .ind-inline{display:flex; flex-direction:column; gap:2px;} }

/* ============================================================
   F105–F106 — regia display-only, priorita' e micro-scene
   Le classi is-* vengono applicate dalla UI: non conservano stato di gioco.
   ============================================================ */

/* Un pannello con una decisione presente deve vincere sul resto della bacheca. */
.panel.is-today,.panel.is-urgent{
  border-color:var(--yellow);
  box-shadow:6px 6px 0 var(--shadow),inset 4px 0 0 var(--yellow);
}
.panel.is-today > h2,.panel.is-urgent > h2{color:var(--yellow);}
.panel.is-secondary{opacity:.82;}
.panel.is-contextual{border-style:dashed;}
.panel.is-dense{padding:8px;}
.panel.is-dense > h2{position:sticky;top:-8px;z-index:2;background:var(--panel);padding-top:3px;}
.decision-now{display:flex;align-items:center;justify-content:space-between;gap:8px;border:2px solid var(--yellow);background:color-mix(in srgb,var(--panel2) 84%,var(--yellow));padding:7px 8px;margin:0 0 8px;}
.decision-now .small{color:var(--ink);}
.panel-kicker{display:block;color:var(--cyan);font-size:8px;letter-spacing:.08em;text-transform:uppercase;margin:-1px 0 4px;}
.dense-summary{display:flex;flex-wrap:wrap;gap:4px 10px;padding:5px 0 7px;margin-bottom:6px;border-bottom:1px dashed var(--border);font-size:8px;color:var(--dim);}
.dense-detail{margin-top:8px;}
.dense-detail[hidden]{display:none;}

/* Calendario: il movimento e' una spiegazione, non un'attesa obbligatoria. */
.time-transition{position:relative;isolation:isolate;}
.time-notice{display:flex;align-items:center;gap:6px;margin:0 0 8px;padding:5px 7px;border-left:4px solid var(--cyan);background:var(--panel2);font-size:8px;color:var(--ink);}
.time-notice::before{content:"◷";color:var(--yellow);font-size:14px;line-height:1;}
.time-notice.is-week-close{border-left-color:var(--orange);}
.time-notice.is-arrival{border-left-color:var(--pink);}
.agenda-day{position:relative;transition:background-color .16s ease-out,border-color .16s ease-out,outline-color .16s ease-out,transform .16s steps(2);}
.agenda-day.is-occupied{background:#30254e;}
.agenda-day.is-passed{opacity:.54;filter:saturate(.65);}
.agenda-day.is-transit{z-index:1;border-color:var(--cyan);background:var(--purple);transform:translateY(-2px);box-shadow:0 3px 0 var(--shadow),inset 0 0 0 2px var(--cyan);}
.agenda-day.is-transit::after{content:"";position:absolute;inset:2px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.18) 0 3px,transparent 3px 7px);pointer-events:none;}
.agenda-day.is-arrival{z-index:2;border-color:var(--yellow);background:color-mix(in srgb,var(--panel2) 70%,var(--yellow));box-shadow:0 0 0 3px var(--yellow),5px 5px 0 var(--shadow);animation:agenda-arrival .55s steps(2) 2;}
.agenda-day.is-arrival em{color:var(--ink);}
.agenda-day.is-week-close{border-color:var(--orange);background:color-mix(in srgb,var(--panel2) 80%,var(--orange));}
.agenda-day.is-week-close::before{content:"CONTI";font-size:7px;color:var(--orange);letter-spacing:.05em;}
.agenda-day:focus-visible{z-index:3;}
@keyframes agenda-arrival{50%{transform:translateY(-4px);filter:brightness(1.3);}}

/* Scene pixel leggere: inserire un elemento vuoto, aria-hidden, con due classi.
   Sono intenzionalmente astratte per poterle riusare fra widget e modal. */
.micro-scene{--scene-a:var(--cyan);--scene-b:var(--pink);position:relative;display:block;min-height:76px;overflow:hidden;border:2px solid var(--border);background:var(--panel2);image-rendering:pixelated;isolation:isolate;}
.micro-scene::before,.micro-scene::after{content:"";position:absolute;pointer-events:none;}
.micro-scene::before{inset:0;background:linear-gradient(180deg,transparent 68%,rgba(0,0,0,.28) 68%);}
.micro-scene.scene-room{--scene-a:#ffd76a;--scene-b:#b46658;background:linear-gradient(180deg,#332542 0 60%,#5a3d32 60%);}
.micro-scene.scene-room::before{left:11%;right:auto;bottom:19px;top:auto;width:21px;height:34px;background:linear-gradient(90deg,#171324 0 3px,transparent 3px 18px,#171324 18px),linear-gradient(180deg,var(--scene-a) 0 12px,#e9b966 12px 16px,#392841 16px);box-shadow:44px -9px 0 -5px var(--scene-b),50px 3px 0 -6px var(--scene-a),94px -25px 0 -6px var(--scene-a);}
.micro-scene.scene-room::after{right:10%;bottom:12px;width:38px;height:19px;border:4px solid #21162b;border-bottom-width:8px;background:#6f5250;}
.micro-scene.scene-studio{--scene-a:#ef6d9c;--scene-b:#3de8ff;background:radial-gradient(circle at 28% 35%,rgba(239,109,156,.35),transparent 22%),linear-gradient(180deg,#171326,#2b2547 68%,#171326 68%);}
.micro-scene.scene-studio::before{left:13%;bottom:16px;width:22px;height:22px;border:5px solid var(--scene-a);border-radius:50%;box-shadow:34px 0 0 -2px var(--scene-b),68px -7px 0 -5px var(--scene-a),102px 2px 0 -4px var(--scene-b);}
.micro-scene.scene-studio::after{right:9%;bottom:10px;width:42px;height:18px;background:repeating-linear-gradient(90deg,var(--scene-b) 0 4px,#172233 4px 7px);border:3px solid #0c0b16;}
.micro-scene.scene-stage{--scene-a:var(--yellow);--scene-b:var(--pink);background:linear-gradient(105deg,#15102d 0 28%,#30245c 28% 30%,#15102d 30% 70%,#30245c 70% 72%,#15102d 72%);}
.micro-scene.scene-stage::before{left:calc(50% - 9px);bottom:14px;width:18px;height:38px;background:linear-gradient(90deg,transparent 0 6px,var(--scene-a) 6px 12px,transparent 12px),linear-gradient(180deg,transparent 0 11px,var(--scene-b) 11px 25px,transparent 25px);box-shadow:-47px 6px 0 -7px var(--scene-b),47px 6px 0 -7px var(--scene-b);}
.micro-scene.scene-stage::after{inset:auto 0 0;height:18px;background:repeating-linear-gradient(90deg,#1b172b 0 7px,#363052 7px 10px);border-top:3px solid var(--scene-a);}
.micro-scene.scene-travel{--scene-a:var(--yellow);--scene-b:var(--cyan);background:linear-gradient(180deg,#1b2947 0 58%,#453e53 58% 64%,#1b1c2f 64%);}
.micro-scene.scene-travel::before{left:18%;bottom:18px;width:68px;height:19px;border:3px solid #151525;border-radius:3px 11px 4px 4px;background:linear-gradient(90deg,var(--scene-b) 0 18%,#344b6a 18% 74%,var(--scene-a) 74%);box-shadow:12px 17px 0 -5px #070912,49px 17px 0 -5px #070912;}
.micro-scene.scene-travel::after{right:10%;top:13px;width:28px;height:14px;background:linear-gradient(135deg,transparent 43%,var(--scene-a) 44% 56%,transparent 57%),linear-gradient(45deg,transparent 43%,var(--scene-a) 44% 56%,transparent 57%);}
.micro-scene.scene-press{--scene-a:#f6ead1;--scene-b:var(--pink);background:#c7b89a;}
.micro-scene.scene-press::before{inset:8px 11px;background:repeating-linear-gradient(0deg,#4d413d 0 2px,transparent 2px 6px),linear-gradient(90deg,var(--scene-b) 0 34%,transparent 34%);border:3px solid #4d413d;}
.micro-scene.scene-press::after{left:16%;top:18px;width:18px;height:18px;background:var(--scene-b);box-shadow:32px 21px 0 -5px #4d413d,54px -1px 0 -5px #4d413d;}
.micro-scene.scene-chart{--scene-a:var(--green);--scene-b:var(--yellow);background:linear-gradient(180deg,#111423,#202846);}
.micro-scene.scene-chart::before{left:13%;right:13%;bottom:11px;height:46px;background:linear-gradient(90deg,transparent 0 5%,var(--scene-a) 5% 20%,transparent 20% 28%,var(--scene-b) 28% 43%,transparent 43% 51%,var(--pink) 51% 66%,transparent 66% 74%,var(--cyan) 74% 89%,transparent 89%);}
.micro-scene.scene-chart::after{left:11%;right:11%;top:11px;height:2px;background:var(--cyan);box-shadow:0 9px 0 rgba(61,232,255,.35),0 18px 0 rgba(61,232,255,.2);}

/* Le classifiche leggono prima la corsa, poi l'archivio completo. */
.chart-top10{border-top:3px solid var(--yellow);}
.chart-top10 tr:nth-child(-n + 3) td:first-child{color:var(--yellow);font-weight:bold;}
.chart-detail{margin-top:9px;}
.chart-detail summary{cursor:pointer;color:var(--cyan);font-size:9px;list-style:none;}
.chart-detail summary::-webkit-details-marker{display:none;}
.chart-detail summary::before{content:"+ ";color:var(--yellow);}
.chart-detail[open] summary::before{content:"− ";}

@media (min-width:720px){
  #main > .panel.is-today,#main > .panel.is-urgent{grid-column:1 / -1;}
  #main > .panel.is-secondary{align-self:start;}
  .micro-scene{min-height:90px;}
}
@media (max-width:600px){
  .panel.is-secondary{opacity:1;}
  .panel.is-dense{overflow-x:auto;}
  .decision-now{align-items:flex-start;flex-direction:column;}
  .agenda-day.is-arrival{box-shadow:0 0 0 2px var(--yellow),3px 3px 0 var(--shadow);}
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important;}
}