/* ============================================================
   Tema AMOLED, impostazione militare.
   Nero puro, tipografia condensata in maiuscolo, spigoli vivi,
   angoli tagliati. Il colore compare solo quando informa (recupero).
   ============================================================ */

/* DejaVu Sans Condensed, ridotto ai soli caratteri usati.
   Licenza in /fonts/LICENZA-DejaVu.txt — ridistribuzione consentita. */
@font-face{
  font-family:"Cond"; src:url("/fonts/cond-400.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cond"; src:url("/fonts/cond-700.woff") format("woff");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --bg:#000; --fg:#fff;
  --g1:rgba(255,255,255,.66);
  --g2:rgba(255,255,255,.42);
  --g3:rgba(255,255,255,.20);
  --g4:rgba(255,255,255,.07);
  --rest:#e0a33c;
  --warm:#7fb2e0;
  --done:rgba(255,255,255,.92);
  --pad:22px;
  --nav-h:52px;
  --tacca:9px;                 /* angolo tagliato dei pulsanti */
  --font:"Cond","Roboto Condensed","Arial Narrow",-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--font);
  font-size:16.5px; line-height:1.38; -webkit-font-smoothing:antialiased;
  display:flex; justify-content:center; overscroll-behavior:none;
}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
#app{width:100%; max-width:440px; position:relative; display:flex; flex-direction:column; min-height:100dvh}
@media(min-width:520px){ #app{border-left:1px solid var(--g3); border-right:1px solid var(--g3)} }

.num{font-variant-numeric:tabular-nums}
.eyebrow{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--g2)}
h1{font-size:38px; line-height:1; font-weight:700; letter-spacing:.02em;
   text-transform:uppercase; margin:0}
h2{font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
   margin:28px 0 0; color:var(--g1); display:flex; align-items:center; gap:9px}
h2::before{content:""; width:12px; height:2px; background:var(--fg); flex:none}

.screen{flex:1; padding:0 var(--pad) calc(var(--nav-h) + 120px)}
.screen[hidden]{display:none}
.top{padding:22px 0 18px}

/* ---- marchio ---- */
.marchio{display:flex; align-items:center; gap:9px;
         padding:calc(env(safe-area-inset-top) + 20px) 0 0}
.marchio svg{width:20px; height:20px; color:var(--fg); flex:none}
.marchio .nome{font-size:13px; font-weight:700; letter-spacing:.3em; text-transform:uppercase}
.marchio .ver{margin-left:auto; font-size:11px; letter-spacing:.14em; color:var(--g2);
              font-variant-numeric:tabular-nums}

/* ---- barra settimane ---- */
.weeks{display:flex; gap:4px; margin:16px 0 10px}
.weeks i{flex:1; height:3px; background:var(--g3)}
.weeks i.on{background:var(--fg)}
.weeks i.cur{background:var(--fg); height:6px; margin-top:-1.5px}

/* ---- lista ---- */
.list{margin-top:20px; border-top:1px solid var(--g3)}
.row{display:flex; align-items:center; gap:14px; padding:15px 2px;
     border-bottom:1px solid var(--g3); width:100%; text-align:left}
.row:active{background:var(--g4)}
.dot{width:10px; height:10px; aspect-ratio:1; border:1px solid var(--g2); flex:0 0 10px}
.dot.done{background:var(--done); border-color:var(--done)}
.dot.next{border-color:var(--fg); border-width:2px}
.dot.part{background:linear-gradient(90deg,var(--done) 50%,transparent 50%); border-color:var(--done)}
.row .body{flex:1; min-width:0}
.row .t{display:block; font-size:16.5px; font-weight:700; letter-spacing:.04em;
        text-transform:uppercase; overflow-wrap:anywhere}
.row .s{display:block; font-size:12.5px; letter-spacing:.03em; color:var(--g2); margin-top:3px}
.row .chev{color:var(--g2); font-size:18px}
.tag{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--g2);
     border:1px solid var(--g3); padding:2px 6px; margin-left:8px; white-space:nowrap;
     font-weight:400}

/* ---- pulsanti ---- */
.cta-wrap{position:fixed; bottom:calc(env(safe-area-inset-bottom) + var(--nav-h)); width:100%;
          max-width:440px; padding:26px var(--pad) 12px; z-index:5;
          background:linear-gradient(to top,#000 62%,rgba(0,0,0,0))}
.cta{width:100%; padding:18px; background:var(--fg); color:#000;
     font-size:15px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
     clip-path:polygon(0 0, calc(100% - var(--tacca)) 0, 100% var(--tacca), 100% 100%, 0 100%)}
.cta:active{opacity:.72}
.cta.ghost{background:none; color:var(--fg); border:1px solid var(--g3); font-weight:700;
           margin-top:10px; letter-spacing:.16em}
.cta[disabled]{opacity:.3}

/* ---- nav ---- */
nav{position:fixed; bottom:0; width:100%; max-width:440px; display:flex; z-index:6;
    border-top:1px solid var(--g3); background:#000; padding-bottom:env(safe-area-inset-bottom)}
nav button{flex:1; color:var(--g2); font-size:10px; letter-spacing:.16em;
           text-transform:uppercase; font-weight:700; padding:15px 0; position:relative}
nav button.on{color:var(--fg)}
nav button.on::before{content:""; position:absolute; top:-1px; left:22%; right:22%;
                      height:2px; background:var(--fg)}

/* ---- player ---- */
#player{position:fixed; inset:0; background:#000; z-index:20; display:flex; flex-direction:column;
        max-width:440px; margin:0 auto; padding:0 var(--pad)}
#player[hidden]{display:none}
.p-top{display:flex; align-items:center; justify-content:space-between; gap:10px;
       padding:calc(env(safe-area-inset-top) + 16px) 0 0}
.p-top .meta{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--g2);
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:700}
.icon-btn{color:var(--g2); font-size:16px; padding:8px; line-height:1; border:1px solid transparent}
.icon-btn.on{color:var(--fg); border-color:var(--g3)}
.bars{display:flex; gap:4px; margin-top:14px}
.bars i{flex:1; height:3px; background:var(--g3)}
.bars i.on{background:var(--fg)}
.bars i.cur{background:var(--fg); opacity:.5}

.stage{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.gif{width:min(60vw,224px); aspect-ratio:1; position:relative; overflow:hidden; flex:none;
     display:flex; align-items:center; justify-content:center; margin-bottom:16px;
     color:var(--g2); font-size:10px; letter-spacing:.2em; text-transform:uppercase}
.gif img{width:100%; height:100%; object-fit:contain; display:none}
.gif.has img{display:block}
.gif.has .ph{display:none}
.gif:not(.has){border:1px solid var(--g3)}
.ex-side{font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--g2);
         min-height:1.2em; font-weight:700}
.ex-name{font-size:23px; font-weight:700; letter-spacing:.04em; line-height:1.1;
         text-transform:uppercase; min-height:2.2em;
         display:flex; align-items:center; justify-content:center; padding:0 2px}
.timer{font-size:clamp(92px,30vw,138px); font-weight:700; letter-spacing:.01em; line-height:.95;
       margin:0; font-variant-numeric:tabular-nums}
.phase{font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--g2);
       min-height:1.3em; font-weight:700}

body.resting .timer, body.resting .phase{color:var(--rest)}
body.resting .ex-name{color:var(--g1)}
body.resting .gif img{opacity:.5}
body.warming .timer, body.warming .phase{color:var(--warm)}
body.paused .timer{opacity:.42}

.upnext{border-top:1px solid var(--g3); padding:13px 0; display:flex; gap:10px; align-items:baseline}
.upnext .k{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--g2);
           flex:none; font-weight:700}
.upnext .v{font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--g1);
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.p-ctrl{display:flex; align-items:center; justify-content:space-between; gap:8px;
        padding:4px 0 calc(env(safe-area-inset-bottom) + 20px)}
.p-ctrl .side{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--g2);
              padding:14px 4px; font-weight:700}
.p-ctrl .play{width:74px; height:74px; border:2px solid var(--g3); font-size:20px;
              display:flex; align-items:center; justify-content:center; flex:none}
.p-ctrl .play:active{background:var(--g4)}

/* ---- calendario ---- */
.mese{display:flex; align-items:center; justify-content:space-between; margin-top:16px}
.mese b{font-size:14px; font-weight:700; letter-spacing:.2em; text-transform:uppercase}
.mese button{color:var(--g1); padding:8px 14px; font-size:18px}
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:2px 0; margin-top:12px;
     flex:1; min-height:0; align-content:center}
.cal .dow{align-self:end; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
          color:var(--g2); text-align:center; padding-bottom:8px; font-weight:700}
.cal .g{display:flex; min-height:0; flex-direction:column; align-items:center; justify-content:center;
        gap:3px; font-size:13px; color:var(--g1); position:relative}
.cal .g .n{width:28px; height:28px; display:flex; align-items:center; justify-content:center;
           line-height:1; font-variant-numeric:tabular-nums}
.cal .g .punti{display:flex; gap:3px; height:6px}
.cal .g.vuoto{visibility:hidden}
.cal .g.oggi .n{border:1px solid var(--g2); color:var(--fg); font-weight:700}
.cal .g b{width:6px; height:6px; background:var(--done); display:block}
.cal .g b.opz{background:none; border:1px solid var(--g2)}
.cal .g b.parz{background:var(--rest)}
.cal .g.nulla{color:var(--g2)}
.legenda{display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:10.5px;
         letter-spacing:.12em; text-transform:uppercase; color:var(--g2)}
.legenda span{display:flex; align-items:center; gap:7px}
.legenda i{width:6px; height:6px; background:var(--done); display:block}
.legenda i.opz{background:none; border:1px solid var(--g2)}
.legenda i.parz{background:var(--rest)}

#s-cal{display:flex; flex-direction:column; height:100dvh;
       padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px); overflow:hidden}
#s-cal .top{padding-bottom:2px; flex:none}
#s-cal .mese, #s-cal .legenda{flex:none}

/* ---- storico / impostazioni ---- */
.stat{display:flex; margin-top:18px; border-top:1px solid var(--g3); border-bottom:1px solid var(--g3)}
.stat div{flex:1; padding:15px 0}
.stat div+div{border-left:1px solid var(--g3); padding-left:15px}
.stat .n{font-size:30px; font-weight:700; letter-spacing:.02em; font-variant-numeric:tabular-nums}
.stat .l{font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--g2); margin-top:3px}
.item{padding:14px 2px; border-bottom:1px solid var(--g3); display:flex;
      justify-content:space-between; align-items:center; gap:14px; width:100%; text-align:left}
.item > span:first-child{flex:1; min-width:0}
.item .l{display:block; font-size:14.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700}
.item .sub{display:block; font-size:12px; color:var(--g2); margin-top:3px; line-height:1.35;
           letter-spacing:.02em}
.item .r{font-size:12px; color:var(--g2); text-align:right; flex:none; letter-spacing:.06em;
         text-transform:uppercase}
.sw{width:46px; height:24px; background:var(--g3); position:relative; flex:none; transition:background .16s}
.sw::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px;
           background:var(--fg); transition:transform .16s}
.sw.on{background:rgba(255,255,255,.9)}
.sw.on::after{transform:translateX(22px); background:#000}
.nota{font-size:11.5px; color:var(--g2); line-height:1.6; margin-top:14px; letter-spacing:.03em}
.nota.warn{color:var(--rest)}

/* ---- dialoghi ---- */
dialog{border:1px solid var(--g3); background:#000; color:var(--fg); width:min(92vw,400px);
       padding:24px 22px; font:inherit; border-radius:0}
dialog::backdrop{background:rgba(0,0,0,.85)}
dialog h3{margin:0 0 10px; font-size:19px; font-weight:700; letter-spacing:.08em; text-transform:uppercase}
dialog p{margin:0 0 18px; font-size:14px; color:var(--g1); line-height:1.5}
dialog .azioni{display:flex; flex-direction:column; gap:8px}
dialog .azioni button{width:100%; padding:15px; font-size:13px; font-weight:700;
                      letter-spacing:.16em; text-transform:uppercase;
                      clip-path:polygon(0 0, calc(100% - var(--tacca)) 0, 100% var(--tacca), 100% 100%, 0 100%)}
dialog .azioni .primario{background:var(--fg); color:#000}
dialog .azioni .secondario{border:1px solid var(--g3); color:var(--fg)}
dialog .azioni .pericolo{border:1px solid var(--rest); color:var(--rest)}
dialog .giorno{border-top:1px solid var(--g3); margin-bottom:16px}
dialog .giorno .item{padding:13px 0}
dialog .giorno .item:last-child{border-bottom:0}

/* ---- avviso ---- */
.avviso{border:1px solid var(--g3); padding:15px; margin-top:18px;
        clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%)}
.avviso .t{font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase}
.avviso .s{font-size:12.5px; color:var(--g2); margin-top:5px; letter-spacing:.03em}
.avviso .azioni{display:flex; gap:8px; margin-top:13px}
.avviso .azioni button{flex:1; padding:12px; font-size:12px; font-weight:700;
                       letter-spacing:.14em; text-transform:uppercase}
.avviso .azioni .primario{background:var(--fg); color:#000}
.avviso .azioni .secondario{border:1px solid var(--g3)}

.vuoto{color:var(--g2); font-size:12.5px; padding:26px 0; text-align:center;
       letter-spacing:.14em; text-transform:uppercase}