/* Lenora OS 27.0 · stile «Y2K Lavanda pastello»
   Base da Color Hunt (#9B8EC7 #BDA6CE #B4D3D9 #F2EAE0), schiarita in pastello.
   Mobile first (iPhone 16 = 393×852 pt), poi Android e schermi larghi. */

/* Font incorporati (site/fonts, licenza OFL): identici su iPhone, Android e PC.
   unicode-range = il browser scarica solo i file che servono; swap = il testo si vede subito. */
@font-face{font-family:"Nunito";font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/nunito-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/nunito-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/jetbrainsmono-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/jetbrainsmono-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:light;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--tbh:50px;

  --lav-50:#FAF8FE;--lav-100:#F1ECFB;--lav-200:#E4DBF7;--lav-300:#D3C6F3;--lav-400:#BBA9EA;--lav-500:#9F8ADB;
  --viola:#7558C8;--inchiostro:#3B2A6E;--notte:#2E2650;
  --acqua:#CFE8EC;--acqua-2:#A9D3DA;--menta:#C8EEDF;--lotus:#E9C69F;--lotus-2:#C98B4E;--crema:#F7F0E7;

  --fg:var(--inchiostro);--muted:#7A6E9C;
  --desk:linear-gradient(172deg,#FCFAFF 0%,#EEE7FB 30%,#DED3F5 58%,#D3EAEF 100%);
  --win:rgba(253,252,255,.94);
  --gloss:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 55%);
  --title:var(--gloss),linear-gradient(90deg,var(--lav-300),var(--lav-400));
  --title-fg:#2E2157;
  --r:22px;
  --win-shadow:0 0 0 2px #fff,0 0 0 4px var(--lav-200),0 16px 36px rgba(59,42,110,.18);
  --btn:linear-gradient(#fff,var(--lav-100));--btn-shadow:0 0 0 2px var(--lav-200),0 3px 0 var(--lav-300);
  --field:#fff;--field-shadow:0 0 0 2px var(--lav-200);--field-r:14px;
  --pfill:linear-gradient(90deg,var(--lav-300),var(--lav-500));

  --font:"Nunito",ui-rounded,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";
}

/* ---------- base ---------- */
/* niente zoom da doppio tocco (gli OK della cascata si toccano in fretta); il pinch resta libero */
*{box-sizing:border-box;margin:0;padding:0;touch-action:manipulation}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:var(--font);font-size:15px;line-height:1.45;color:var(--fg);background:var(--notte);
  -webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;-webkit-touch-callout:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-appearance:none;appearance:none}
input,textarea{font:inherit;font-size:16px;color:inherit;border:0;outline:0;-webkit-appearance:none;appearance:none;-webkit-user-select:text;user-select:text}
a{color:var(--viola)}
[hidden]{display:none!important}

/* ---------- niente controlli di sistema: tutto disegnato qui ---------- */
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none;width:0;height:0}
::selection{background:var(--lav-300);color:#2E2157}
input,textarea{caret-color:var(--viola)}
::placeholder{color:#A99FC6;opacity:1}
:focus{outline:none}
:focus-visible{outline:2px solid var(--lav-400);outline-offset:2px;border-radius:12px}
button:disabled{opacity:.55;cursor:default}
/* barra di scorrimento disegnata (posizione e fisica in app.js) */
.sb{position:absolute;z-index:3;left:0;top:0;width:4px;border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,var(--lav-400),var(--lav-500));box-shadow:0 0 0 1px rgba(255,255,255,.7);
  opacity:.28;will-change:transform,height;transition:opacity .35s ease,width .18s ease,margin .18s ease}
.sb.on{opacity:.85;transition:opacity .12s ease,width .18s ease,margin .18s ease}
@media (hover:hover){
  .sb{pointer-events:auto;cursor:grab}
  .win:hover .sb{opacity:.6}
  .sb:hover,.sb.drag{width:8px;margin-left:-4px;opacity:1}
  .sb.drag{cursor:grabbing}
}
.muted{color:var(--muted);font-size:13px}
.center{text-align:center}
.acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* ---------- schermate a tutto schermo (gate, attesa, scan, boot) ---------- */
.full{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;background:var(--notte);color:#DCD2F7;
  padding:calc(var(--sat) + 18px) 20px calc(var(--sab) + 28px)}
.full .mid{margin:auto 0;text-align:center}
.full h1{font-size:24px;line-height:1.2;color:#fff;margin:14px 0 8px}
.full p{color:#C9BEEA;max-width:34ch;margin:0 auto}
.big-emoji{font-size:64px;line-height:1}

.logo{display:inline-flex;align-items:center;gap:12px;text-align:left}
.flag{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:44px;height:44px;flex:none;transform:perspective(90px) rotateY(-20deg) skewY(-6deg)}
.flag i{border-radius:4px}
.flag i:nth-child(1){background:var(--lav-400)}.flag i:nth-child(2){background:#9EDDC6}
.flag i:nth-child(3){background:#9ACFD8}.flag i:nth-child(4){background:var(--lotus)}
.logo b{display:block;font-size:36px;line-height:1;font-weight:800;letter-spacing:-.5px}
.logo small{display:block;font-size:13px;opacity:.8;margin-top:5px}
.full .logo b{background:linear-gradient(90deg,#EDE6FF,var(--lav-300),var(--acqua));-webkit-background-clip:text;background-clip:text;color:transparent}

/* boot */
#boot{cursor:pointer}
#boot .lines{width:100%;max-width:420px;margin:0 auto;font-family:var(--mono);font-size:14.5px;line-height:1.55}
#boot .lines p{white-space:pre;min-height:1.55em;overflow:hidden}
#boot .kv-line{display:flex;align-items:baseline;gap:.6ch}
#boot .kv-line .k,#boot .kv-line .v{flex:none}
#boot .kv-line .lead{flex:1;min-width:2ch;overflow:hidden;color:rgba(220,210,247,.38)}
#boot .kv-line .lead::before{content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ."}
#boot .kv-line .v{color:#fff;text-align:right}
#boot .splash{margin-top:auto;text-align:center;opacity:0;transition:opacity .6s}
#boot.ready .splash{opacity:1}
.boot-bar{width:220px;height:16px;margin:22px auto 0;padding:2px;border-radius:999px;border:2px solid var(--lav-300)}
.boot-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--lav-300),var(--acqua));transition:width .3s}
.tap{margin-top:22px;font-family:var(--mono);font-size:16px;animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* attesa */
.hourglass{display:inline-block;animation:flip 2.4s ease-in-out infinite}
@keyframes flip{0%,40%{transform:rotate(0)}50%,90%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
.dots::after{content:"";animation:dots 1.5s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.pill{display:inline-block;margin-top:18px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.08);font-size:13px;color:#C9BEEA}

/* scan «Face ID» */
.scanbox{position:relative;width:180px;height:180px;margin:0 auto 22px}
.scanbox .face{position:absolute;inset:22px;display:grid;place-items:center;font-size:96px;border-radius:40px;background:radial-gradient(circle,rgba(211,198,243,.25),transparent 70%)}
.scanbox .corner{position:absolute;width:44px;height:44px;border:4px solid var(--lav-300)}
.scanbox .c1{top:0;left:0;border-right:0;border-bottom:0;border-radius:22px 0 0 0}
.scanbox .c2{top:0;right:0;border-left:0;border-bottom:0;border-radius:0 22px 0 0}
.scanbox .c3{bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 22px}
.scanbox .c4{bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 22px 0}
.scanbox .line{position:absolute;left:10px;right:10px;height:3px;border-radius:3px;background:var(--acqua);box-shadow:0 0 14px 3px rgba(207,232,236,.8);animation:scan 1.6s ease-in-out infinite alternate}
@keyframes scan{from{top:12px}to{top:165px}}
#scan.done .line{display:none}
#scan.done .corner{border-color:#9EDDC6;transition:border-color .3s}
.scanlist{list-style:none;max-width:320px;margin:0 auto;text-align:left;font-size:14.5px}
.scanlist li{display:flex;gap:8px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.08);animation:fadein .35s ease-out}
.scanlist b{flex:none;width:96px;color:#fff;font-weight:600}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}}
.ok-big{margin:18px 0 6px;font-size:20px;font-weight:800;color:#fff;animation:fadein .4s ease-out}

.btn-full{margin:24px auto 0;min-height:50px;padding:0 26px;border-radius:999px;font-weight:700;font-size:16px;color:#2E2157;
  background:var(--gloss),linear-gradient(90deg,var(--lav-300),var(--acqua));box-shadow:0 0 0 2px rgba(255,255,255,.5)}

/* ---------- desktop ---------- */
#desk{position:fixed;inset:0;background:var(--desk);overflow:hidden}
.bubble{position:absolute;bottom:-40px;width:1em;height:1em;border-radius:50%;pointer-events:none;
  border:1.5px solid rgba(255,255,255,.85);background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0 10%,rgba(255,255,255,.2) 38%,transparent 70%);
  animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0);opacity:0}10%{opacity:.9}90%{opacity:.8}100%{transform:translateY(-110vh) translateX(14px);opacity:0}}

.icons{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:16px 4px;max-width:520px;margin:0 auto;padding:calc(var(--sat) + 20px) 10px 0}
.ico{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:88px;padding:2px;font-size:12px;font-weight:600;line-height:1.2;text-align:center;color:var(--inchiostro);text-shadow:0 1px 0 rgba(255,255,255,.85)}
.ico .em{display:grid;place-items:center;width:62px;height:62px;font-size:38px;line-height:1;border-radius:20px;text-shadow:none;
  background:rgba(255,255,255,.62);box-shadow:0 0 0 2px #fff,0 6px 14px rgba(59,42,110,.14);transition:transform .12s}
.ico:active .em{transform:scale(.9)}
.ico span:last-child{padding:0 2px;overflow-wrap:break-word}

.wall-logo{position:absolute;left:0;right:0;bottom:calc(var(--tbh) + var(--sab) + 14%);display:flex;justify-content:center;pointer-events:none}
.wall-logo .logo b{background:linear-gradient(90deg,var(--lav-500),#8E7BD6 45%,#6FB5C2);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(255,255,255,.7))}
.wall-logo .logo small{color:var(--inchiostro);opacity:.65;text-shadow:none}

/* taskbar */
.bar{position:fixed;z-index:30;left:10px;right:10px;bottom:calc(var(--sab) + 8px);height:var(--tbh);padding:5px;display:flex;align-items:center;gap:6px;
  border-radius:999px;background:rgba(255,255,255,.72);box-shadow:0 0 0 2px rgba(255,255,255,.9),0 8px 22px rgba(59,42,110,.16);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.start{flex:none;height:40px;padding:0 14px 0 10px;display:flex;align-items:center;gap:7px;border-radius:999px;font-weight:800;color:#2E2157;background:var(--title)}
.start .flag{width:20px;height:20px;gap:2px;transform:none}
.start .flag i{border-radius:2px}
.task{flex:1;min-width:0;height:40px;padding:0 12px;border-radius:999px;text-align:left;font-size:13px;font-weight:700;color:var(--viola);background:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tray{flex:none;margin-left:auto;display:flex;align-items:center;padding:0 14px 0 6px;font-size:14px;font-weight:800;color:var(--viola)}
#clock{font-variant-numeric:tabular-nums}

/* ---------- finestre ---------- */
.win{position:fixed;z-index:40;left:50%;transform:translateX(-50%);width:min(calc(100% - 16px),480px);
  top:calc(var(--sat) + 10px);bottom:calc(var(--tbh) + var(--sab) + 18px);display:flex;flex-direction:column;
  background:var(--win);box-shadow:var(--win-shadow);border-radius:var(--r);overflow:hidden;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:pop .18s ease-out}
@keyframes pop{from{opacity:0;transform:translateX(-50%) scale(.95)}}
.tb{flex:none;display:flex;align-items:center;gap:8px;min-height:48px;padding:0 7px 0 18px;background:var(--title);color:var(--title-fg);font-weight:800;font-size:16px}
.tb .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x{position:relative;flex:none;width:44px;height:44px;margin:-4px -5px -4px 0;border-radius:50%;font-size:0;color:transparent;
  background:center/32px 32px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='white'/%3E%3Cpath d='M11.5 11.5l9 9M20.5 11.5l-9 9' stroke='%237558C8' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  filter:drop-shadow(0 1.5px 2.5px rgba(59,42,110,.22));transition:transform .12s ease,filter .12s ease}
.x:active{transform:scale(.88)}
@media (hover:hover){.x:hover{filter:drop-shadow(0 2px 5px rgba(59,42,110,.3)) brightness(1.02)}}
.wb{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:16px}

.btn{min-height:44px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;font-weight:700;background:var(--btn);box-shadow:var(--btn-shadow)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--title);color:#2E2157;box-shadow:0 0 0 2px #fff,0 3px 0 var(--lav-500)}
.btn.wide{width:100%}
.field{display:block;width:100%;padding:12px 14px;margin-bottom:10px;background:var(--field);box-shadow:var(--field-shadow);border-radius:var(--field-r)}
.field:focus{box-shadow:0 0 0 2px var(--lav-400)}
textarea.field{min-height:88px;resize:none}

/* note */
.mbar{flex:none;display:flex;gap:16px;padding:7px 16px;font-size:13.5px;color:var(--muted)}
.np{margin:0 6px 6px;background:var(--field);box-shadow:var(--field-shadow);border-radius:var(--field-r);font-size:14.5px;-webkit-user-select:text;user-select:text}
.np h4{margin:18px 0 6px;font-size:15px;color:var(--viola)}
.np ul{list-style:none}
.np li{position:relative;padding-left:16px;margin:6px 0}
.np li::before{content:"•";position:absolute;left:2px;color:var(--lav-500)}
.np .cv{margin-top:4px}
.np .sig{margin-top:20px;color:var(--muted)}

/* ---------- dialog, toast, menu ---------- */
#scrim{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(46,38,80,.18)}
.dlg{width:min(100%,340px);background:rgba(255,255,255,.97);box-shadow:var(--win-shadow);border-radius:var(--r);overflow:hidden;animation:pop2 .18s ease-out}
@keyframes pop2{from{opacity:0;transform:scale(.92)}}
.dlg .msg{display:flex;gap:12px;align-items:flex-start;padding:18px 18px 4px}
.dlg .msg>div{min-width:0;overflow-wrap:anywhere}
.dlg .big{font-size:34px;line-height:1}
.dlg .acts{padding:14px 14px 16px}
.dlg small{color:var(--muted)}
.toast{position:fixed;z-index:70;left:50%;bottom:calc(var(--tbh) + var(--sab) + 26px);transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);
  padding:11px 18px;border-radius:20px;text-align:center;text-wrap:balance;line-height:1.35;font-size:14px;font-weight:600;background:#fff;box-shadow:var(--win-shadow);animation:toast 3.4s ease forwards;pointer-events:none}
@keyframes toast{0%{opacity:0;transform:translate(-50%,8px)}8%,86%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
/* scheda «Lenora» */
.menu{position:fixed;z-index:45;left:10px;bottom:calc(var(--tbh) + var(--sab) + 16px);width:min(330px,calc(100% - 20px));padding:14px;
  background:rgba(255,255,255,.96);box-shadow:var(--win-shadow);border-radius:26px;animation:card .2s cubic-bezier(.2,.9,.3,1.15);transform-origin:24px 100%}
@keyframes card{from{opacity:0;transform:translateY(10px) scale(.94)}}
.me{display:flex;align-items:center;gap:12px;padding:4px 4px 14px}
.avatar{flex:none;display:grid;place-items:center;width:58px;height:58px;font-size:34px;border-radius:50%;
  background:var(--title);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--lav-200)}
.me-txt{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.me-txt b{font-size:19px;font-weight:800;color:var(--inchiostro)}
.me-txt span{font-size:12.5px;color:var(--muted)}
.me-txt .me-days{margin-top:3px;font-weight:700;color:var(--viola);font-variant-numeric:tabular-nums}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:76px;padding:12px 12px 10px;border-radius:18px;text-align:left;
  font-size:13.5px;font-weight:700;color:var(--inchiostro);background:linear-gradient(180deg,#fff,var(--lav-50));box-shadow:0 0 0 1.5px var(--lav-200);
  transition:transform .12s ease,box-shadow .12s ease}
.tile .em{font-size:24px;line-height:1}
.tile:active{transform:scale(.96);box-shadow:0 0 0 2px var(--lav-400)}
.tile:last-child:nth-child(odd){grid-column:1/-1}
.off-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;margin-top:10px;border-radius:16px;
  font-weight:800;font-size:14.5px;color:var(--viola);background:var(--lav-50);box-shadow:0 0 0 1.5px var(--lav-200)}
.off-btn:active{transform:scale(.98)}
.off-btn .pw{width:16px;height:16px;background:center/16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237558C8' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 3v9'/%3E%3Cpath d='M6.3 6.8a8 8 0 1 0 11.4 0'/%3E%3C/svg%3E")}
@media (hover:hover){.tile:hover,.off-btn:hover{box-shadow:0 0 0 2px var(--lav-300)}}

/* ---------- torta ---------- */
#w-torta .wb{display:flex;flex-direction:column;text-align:center}
#w-torta .wb>:first-child{margin-top:auto}
#w-torta .wb>:last-child{margin-bottom:auto}
.cake{position:relative;flex:none;width:min(340px,100%);aspect-ratio:320/300;margin:6px auto 0}
.cake svg,.cake canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cake canvas{touch-action:none;cursor:pointer}
.ck-name,.ck-name-shadow{font-family:var(--font);font-weight:900;font-size:34px;letter-spacing:.5px}
.ck-name{fill:#fff}
.ck-name-shadow{fill:#7E68C9;transform:translateY(2px);opacity:.75}
.ck-ribbon-txt{font-family:var(--font);font-weight:800;font-size:7.6px;letter-spacing:1.6px;fill:#3E2A22}
/* fiammella «Riaccendi» sopra al contatore, al centro: il suo spazio è sempre riservato, così niente salta */
.cake-bar{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 0 22px}
.lit{font-size:14px;color:var(--muted);font-weight:600}
.lit b{margin-left:6px;font-family:var(--mono);font-size:22px;color:var(--viola);font-variant-numeric:tabular-nums}
.lit span{font-family:var(--mono);font-size:14px}
/* «Riaccendi»: piccolo, compare solo quando almeno una candelina è spenta (lo spazio resta, niente salti) */
.mini{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:15px;line-height:1;color:var(--viola);
  background:var(--lav-50);box-shadow:0 0 0 1.5px var(--lav-200);opacity:0;visibility:hidden;transform:scale(.9);
  transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
.mini::after{content:"";position:absolute;inset:-9px -4px}
.mini.show{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .25s cubic-bezier(.2,.9,.3,1.3)}
.mini:active{transform:scale(.94)}
.cake-hint{margin-top:16px}
#cake-msg{margin-bottom:6px}
.conf{position:fixed;top:-16px;z-index:999;width:8px;height:14px;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

/* ---------- uptime ---------- */
.up-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0 16px}
.up-grid div{padding:10px 2px;text-align:center;background:var(--field);box-shadow:var(--field-shadow);border-radius:var(--field-r)}
.up-grid b{display:block;font-family:var(--mono);font-size:min(22px,5.4vw);line-height:1.1;color:var(--viola);font-variant-numeric:tabular-nums}
.up-grid span{font-size:11px;color:var(--muted)}
.kv{width:100%;border-collapse:collapse;font-size:14px}
.kv td{padding:9px 4px;vertical-align:top;border-bottom:1px solid var(--lav-100)}
.kv tr:last-child td{border-bottom:0}
.kv td:first-child{width:44%;color:var(--muted)}
.kv b{font-variant-numeric:tabular-nums}
.pbar{height:16px;margin-top:6px;padding:2px;border-radius:999px;background:var(--field);box-shadow:var(--field-shadow)}
.pbar i{display:block;height:100%;border-radius:inherit;background:var(--pfill)}
#u-v28{display:block;margin-top:5px}

/* ---------- guestbook ---------- */
.marq{margin:-16px -16px 14px;padding:8px 0;overflow:hidden;white-space:nowrap;font-weight:700;color:#2E2157;background:linear-gradient(90deg,var(--acqua),var(--lav-200),var(--menta))}
.marq span{display:inline-block;padding-left:100%;animation:marq 14s linear infinite}
@keyframes marq{to{transform:translateX(-100%)}}
.counter{display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px}
/* contachilometri: ogni cifra è un rullo 0-9 (+ uno 0 in fondo per passare da 9 a 0 andando avanti) */
.digits{display:inline-flex;gap:3px;padding:4px;border-radius:9px;background:var(--notte);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.7)}
.digits i{position:relative;display:block;width:16px;height:24px;overflow:hidden;border-radius:4px;
  background:linear-gradient(#211B3D,#352C5C 50%,#211B3D)}
.digits i::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(10,6,25,.6),transparent 32%,transparent 68%,rgba(10,6,25,.6))}
.digits b{display:flex;flex-direction:column;font:600 18px/24px var(--mono);text-align:center;color:#9EF0C8;
  text-shadow:0 0 6px rgba(158,240,200,.45);transition:transform 1.2s cubic-bezier(.22,.9,.24,1)}
.digits b.snap{transition:none}
.counter-me{margin:7px 0 14px;text-align:center;font-size:12px;font-weight:700;color:var(--muted)}
.emo{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 12px}
.emo button{width:42px;height:42px;font-size:21px;border-radius:50%;background:var(--btn);box-shadow:var(--btn-shadow)}
.entry{margin-top:10px;padding:11px 14px;background:var(--field);box-shadow:var(--field-shadow);border-radius:var(--field-r);transition:transform .15s}
.entry .who{display:flex;justify-content:space-between;gap:8px;margin-bottom:3px;font-size:13px;color:var(--muted)}
.entry .who{align-items:center}
.entry .who b{color:var(--viola);margin-right:auto}
/* cestino per eliminare (solo Lenora): piccolo, ma con area di tocco piena */
.del{position:relative;flex:none;width:28px;height:28px;margin:-6px -8px -6px 0;border-radius:50%;
  background:center/16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239F8ADB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3'/%3E%3C/svg%3E")}
.del::after{content:"";position:absolute;inset:-8px}
.del:active{background-color:var(--lav-100)}
.entry p{overflow-wrap:anywhere;white-space:pre-wrap}
.empty{padding:22px 0;text-align:center;color:var(--muted)}

/* ---------- foto ---------- */
.foto-hint{margin:8px 0 0}
/* avanzamento del caricamento: barra a righe che scorrono, stile anni 2000 */
.up{margin-top:14px;padding:12px 14px;background:var(--field);box-shadow:var(--field-shadow);border-radius:var(--field-r)}
.up-top{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.up-top span{font-family:var(--mono);font-size:13px;color:var(--viola)}
.up-bar{height:12px;margin:8px 0 7px;border-radius:999px;background:var(--lav-100);box-shadow:inset 0 1px 2px rgba(59,42,110,.15);overflow:hidden}
.up-bar i{display:block;height:100%;width:0;border-radius:inherit;transition:width .3s ease;
  background:repeating-linear-gradient(-45deg,var(--lav-300) 0 8px,var(--lav-400) 8px 16px) 0 0/22.6px 100%,var(--lav-400);animation:stripes .8s linear infinite}
@keyframes stripes{to{background-position:22.6px 0}}
.up-note{font-size:12px;color:var(--muted)}
.up.done .up-bar i{background:var(--menta);animation:none}
.ph{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px}
.ph button{position:relative;aspect-ratio:1;overflow:hidden;border-radius:12px;background:var(--lav-100);transition:transform .15s;animation:pop3 .25s ease-out}
@keyframes pop3{from{opacity:0;transform:scale(.9)}}
.ph button:active{transform:scale(.96)}
.ph img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.ph .badge{position:absolute;left:6px;bottom:6px;display:flex;align-items:center;gap:4px;padding:2px 7px 2px 6px;border-radius:999px;
  background:rgba(46,38,80,.72);color:#fff;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.ph .badge::before{content:"";width:0;height:0;border-left:7px solid #fff;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.ph .wip{display:grid;place-content:center;justify-items:center;gap:7px;font-size:11px;font-weight:800;color:var(--viola);cursor:default}
.ph .wip::before{content:"";width:22px;height:22px;border-radius:50%;border:3px solid var(--lav-200);border-top-color:var(--viola);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- visualizzatore: si scorre col dito, video con controlli disegnati ---------- */
#viewer{position:fixed;inset:0;z-index:58;display:flex;flex-direction:column;background:rgba(30,24,56,.95);color:#fff;touch-action:none;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fade .18s ease-out}
@keyframes fade{from{opacity:0}}
.vw-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(var(--sat) + 10px) 14px 8px 16px;transition:opacity .2s}
.vw-n{padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.12);font:600 13px var(--mono);font-variant-numeric:tabular-nums}
.vw-stage{position:relative;flex:1;min-height:0;overflow:hidden}
.vw-track{position:absolute;inset:0}
.vw-track.anim{transition:transform .28s cubic-bezier(.2,.8,.25,1)}
.vw-slide{position:absolute;top:0;bottom:0;width:100%;display:grid;place-items:center}
.vw-slide:nth-child(1){left:calc(-100% - 20px)}
.vw-slide:nth-child(2){left:0}
.vw-slide:nth-child(3){left:calc(100% + 20px)}
.vw-media{position:relative;overflow:hidden;border-radius:14px;background:rgba(255,255,255,.06);box-shadow:0 12px 40px rgba(0,0,0,.45)}
.vw-media img,.vw-media video{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}
.vw-media img{-webkit-touch-callout:default}
.vw-media video{background:#000}
.vw-play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;pointer-events:none;transition:opacity .2s,transform .2s;
  background:center/68px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68'%3E%3Ccircle cx='34' cy='34' r='33' fill='white' fill-opacity='.92'/%3E%3Cpath d='M27 21.5v25a1.6 1.6 0 0 0 2.4 1.4l20-12.5a1.6 1.6 0 0 0 0-2.8l-20-12.5A1.6 1.6 0 0 0 27 21.5z' fill='%237558C8'/%3E%3C/svg%3E");
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.35))}
.vw-media.playing .vw-play{opacity:0;transform:scale(.8)}
.vw-ctl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:18px 12px 10px;
  background:linear-gradient(transparent,rgba(0,0,0,.45));font:600 12px var(--mono);font-variant-numeric:tabular-nums;transition:opacity .25s}
.vw-media.playing.quiet .vw-ctl{opacity:0}
.vw-prog{position:relative;flex:1;height:24px;cursor:pointer}
.vw-prog::before,.vw-prog i{content:"";position:absolute;left:0;top:50%;height:4px;margin-top:-2px;border-radius:999px}
.vw-prog::before{right:0;background:rgba(255,255,255,.3)}
.vw-prog i{width:0;background:#fff}
.vw-prog b{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.vw-bot{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 16px calc(var(--sab) + 18px);transition:opacity .2s}
.vw-cap{min-height:19px;font-size:14px;font-weight:700;color:rgba(255,255,255,.85);text-align:center}
.vw-acts{display:flex;gap:10px}
.vw-acts .btn{min-width:118px;color:#2E2157}
#viewer.bare .vw-top,#viewer.bare .vw-bot{opacity:0;pointer-events:none}
.vw-arr{display:none}
@media (hover:hover) and (min-width:700px){
  .vw-arr{display:block;position:absolute;top:50%;width:48px;height:48px;margin-top:-24px;border-radius:50%;transition:transform .12s,opacity .2s;
    background:center/48px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='23' fill='white' fill-opacity='.9'/%3E%3Cpath d='M27.5 15.5L19 24l8.5 8.5' fill='none' stroke='%237558C8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
  .vw-arr.prev{left:20px}
  .vw-arr.next{right:20px;transform:scaleX(-1)}
  .vw-arr:hover{filter:brightness(1.05)}
  .vw-arr[disabled]{opacity:0;pointer-events:none}
}

/* ---------- QC Terme ---------- */
#w-terme .wb{text-align:center}
.wheel-wrap{position:relative;width:min(80vw,310px);aspect-ratio:1;margin:30px auto 18px;touch-action:none;cursor:grab}
.wheel-wrap:active{cursor:grabbing}
.wheel{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 12px 22px rgba(59,42,110,.22))}
.wheel .seg{transition:opacity .35s,filter .35s}
.wheel.won .seg:not(.win){opacity:.4}
.wheel .seg.win{animation:winseg .5s ease-in-out 3}
@keyframes winseg{50%{filter:brightness(1.12) saturate(1.3)}}
.wheel .sep{stroke:#fff;stroke-width:1.8;stroke-linecap:round}
.wheel .peg{fill:#fff;stroke:var(--lav-400);stroke-width:.8}
.wheel .lbl{font:800 9.4px var(--font);fill:#2E2157;letter-spacing:.1px;pointer-events:none}
/* lucine del bordo: lente a riposo, a rincorrersi mentre gira, lampeggio quando vince */
.wheel .bulb .core{fill:#FFFBEA}
.wheel .bulb .halo{fill:#FFF0B8;opacity:.55}
.wheel .bulb{animation:bulb 2.4s ease-in-out infinite}
.wheel .bulb.b1{animation-delay:-1.2s}
@keyframes bulb{50%{opacity:.45}}
.wheel-wrap.spin .bulb{animation:bulbfast .32s steps(1) infinite}
.wheel-wrap.spin .bulb.b1{animation-delay:-.16s}
@keyframes bulbfast{50%{opacity:.25}}
.wheel.won .bulb{animation:bulbwin .25s steps(1) 8}
@keyframes bulbwin{50%{opacity:.2}}
/* lancetta: perno in alto, scatta sui pioli */
.wheel-pin{position:absolute;z-index:3;top:-17px;left:50%;width:30px;height:40px;transform:translateX(-50%);transform-origin:50% 11px;pointer-events:none;
  background:center/30px 40px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 40'%3E%3Cpath d='M15 39C12 31 3 22 3 13a12 12 0 0 1 24 0c0 9-9 18-12 26z' fill='%237558C8' stroke='white' stroke-width='2.4' stroke-linejoin='round'/%3E%3Ccircle cx='15' cy='12' r='4.2' fill='white'/%3E%3C/svg%3E");
  filter:drop-shadow(0 3px 3px rgba(46,38,80,.3))}
.wheel-hub{position:absolute;z-index:2;inset:40%;display:grid;place-items:center;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#fff,var(--lav-50));box-shadow:0 0 0 3px #fff,0 0 0 5px var(--lav-300),0 3px 8px rgba(59,42,110,.25);font-size:24px}

/* ---------- Hermoss (stile graffetta di Office) ---------- */
#clippy{position:fixed;z-index:55;right:12px;bottom:calc(var(--tbh) + var(--sab) + 18px);width:min(300px,calc(100% - 24px));display:flex;flex-direction:column;align-items:flex-end;animation:pop2 .2s ease-out}
.cl-bubble{position:relative;width:100%;padding:14px 16px;border-radius:18px;background:#FFFBE8;box-shadow:0 0 0 2px #EADFA8,0 10px 24px rgba(59,42,110,.18);font-size:14.5px}
.cl-bubble::after{content:"";position:absolute;right:38px;bottom:-12px;border:12px solid transparent;border-top-color:#FFFBE8;border-bottom:0}
.cl-bubble .acts{justify-content:flex-start;margin-top:12px}
.cl-bubble .btn{min-height:38px;padding:0 14px;font-size:13.5px}
a.btn{text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
.cl-guy{position:relative;margin:8px 14px 0 0;font-size:54px;line-height:1;animation:bob 2.2s ease-in-out infinite}
.cl-guy .eye{position:absolute;top:12px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px #555}
.cl-guy .eye::after{content:"";position:absolute;left:4px;top:3px;width:5px;height:5px;border-radius:50%;background:#222;animation:look 3s ease-in-out infinite}
.cl-guy .e1{left:12px}.cl-guy .e2{left:28px}
@keyframes bob{50%{transform:translateY(-4px) rotate(-4deg)}}
@keyframes look{0%,40%{transform:translate(0,0)}50%,90%{transform:translate(-2px,2px)}}

/* ---------- NON_APRIRE: errori a cascata ---------- */
#cascade{position:fixed;inset:0;z-index:65;pointer-events:none}
#cascade .dlg{position:absolute;width:min(290px,calc(100% - 60px));pointer-events:auto;animation:pop2 .14s ease-out}
.fakebar{height:18px;margin:14px 0 6px;padding:2px;border-radius:999px;background:#fff;box-shadow:var(--field-shadow)}
.fakebar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--pfill);transition:width .2s linear}
.lettera{white-space:pre-wrap;font-size:16px;line-height:1.6;-webkit-user-select:text;user-select:text}
.lettera-sig{margin-top:18px;text-align:right;font-weight:700;color:var(--viola)}

/* ---------- salvaschermo ---------- */
#saver{position:fixed;inset:0;z-index:90;overflow:hidden;background:linear-gradient(180deg,#BFE3EA,#9ED0DA);cursor:pointer}
#saver .lane{position:absolute;left:0;right:0;height:3px;background:repeating-linear-gradient(90deg,#fff 0 18px,#E46C6C 18px 36px);opacity:.8}
#saver .swimmer{position:absolute;top:46%;left:0;font-size:46px;animation:swim 9s linear infinite}
@keyframes swim{0%{transform:translateX(calc(100vw - 60px))}49%{transform:translateX(0)}50%{transform:translateX(0) scaleX(-1)}99%{transform:translateX(calc(100vw - 60px)) scaleX(-1)}100%{transform:translateX(calc(100vw - 60px))}}
#saver .info{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 40px);text-align:center;color:#2E4A55;font-weight:700}
#saver .info small{display:block;font-weight:500;opacity:.75;margin-top:4px}

/* ---------- spento ---------- */
#off{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:24px;background:#000;color:#F7A440;font-family:var(--mono);font-size:19px;text-align:center;cursor:pointer}

/* ---------- schermi larghi (tablet, PC): stessa esperienza, più aria ---------- */
@media (min-width:700px){
  .icons{grid-template-columns:repeat(auto-fill,104px);max-width:none;margin:0;padding:calc(var(--sat) + 28px) 28px 0;gap:22px 12px}
  .bar{left:50%;right:auto;transform:translateX(-50%);width:min(720px,calc(100% - 40px))}
  .menu{left:max(20px,calc(50% - 350px))}
  .win{top:calc(var(--sat) + 28px);bottom:calc(var(--tbh) + var(--sab) + 30px);max-height:820px;width:min(calc(100% - 40px),520px)}
  .wall-logo{bottom:18%}
  .wall-logo .logo b{font-size:44px}
}
@media (hover:hover){
  .ico:hover .em{transform:translateY(-2px);box-shadow:0 0 0 2px #fff,0 10px 18px rgba(59,42,110,.2)}
  .btn:hover,.start:hover{filter:brightness(1.03)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .bubble{display:none}
}