/* Reset di base */
html, body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
/* Layout: sala buia con due luci colorate sfocate (viola e brace), titoli enormi in Manrope, una parola in lime.
Il pubblico vede l'episodio in onda; lo staff, dopo il login, ha una barra a pillola con Calendario · Attività · Chi fa cosa · Materiale. */
:root {
--bg: #050505;
--bg2: #0e0e0e;
--fg: #f4f4f2;
--paper: #f4f4f2;
--ink: #0a0a0a;
--muted: #8d91a0;
--line: rgba(255,255,255,.09);
--lime: #a8f0d2;
--on-accent: #0c2a1f;
--pink: #a8f0d2;
--violet: #4c35a8;
--ember: #b8442c;
--wood: #c9905c;
--wood-dark: #8f5e36;
--font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 16px; line-height: 1.55; overflow-x: hidden; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
/* ---------- Testata ---------- */
.top { position: relative; z-index: 30; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 18px; }
.logo { font-weight: 800; font-size: 1.35rem; letter-spacing: -.04em; color: var(--fg); text-decoration: none; display: flex; align-items: center; gap: 6px; }
.logo i { width: 12px; height: 12px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 18px var(--lime); }
.burger { width: 48px; height: 48px; border: 0; background: none; display: grid; place-content: center; gap: 7px; cursor: pointer; }
.burger span { display: block; width: 26px; height: 2.5px; background: var(--lime); border-radius: 2px; transition: transform .3s cubic-bezier(.34,1.4,.64,1); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.menu { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); top: 76px; width: min(240px, calc(100% - 32px)); background: rgba(22,22,24,.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.14); border-radius: 26px; padding: 6px; display: grid; gap: 4px; box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.menu a { padding: 13px 20px; border-radius: 20px; text-decoration: none; font-weight: 500; font-size: 1.05rem; text-align: center; }
.menu .to-staff { background: var(--lime); color: var(--on-accent); }
.menu .to-staff:hover { background: #bff5de; }
.menu .to-staff span { display: none; }
/* ---------- Hero / layout episodio ---------- */
.ep { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); }
.ep::before, .ep::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.ep::before { width: 46vmax; height: 46vmax; left: -16vmax; top: -18vmax; background: var(--c1, var(--violet)); opacity: .85; animation: drift 14s ease-in-out infinite alternate; }
.ep::after { width: 38vmax; height: 38vmax; right: -14vmax; bottom: -16vmax; background: var(--c2, var(--ember)); opacity: .8; animation: drift 17s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(4vmax, 3vmax) scale(1.08); } }
.ep-in { min-height: calc(100vh - 84px); display: grid; place-items: center; text-align: center; padding-block: 72px 56px; gap: 22px; align-content: center; }
.ep-title { font-weight: 800; font-size: clamp(3rem, 11vw, 7.4rem); line-height: .95; letter-spacing: -.055em; max-width: 12ch; overflow-wrap: anywhere; }
.ep-title em { font-style: normal; color: var(--hi, var(--lime)); display: block; }
.ep-sub { font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--muted); max-width: 34ch; }
.ep-sub b { color: var(--fg); font-weight: 700; }
.ep-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.fact { border: 1px solid var(--line); background: rgba(255,255,255,.04); backdrop-filter: blur(8px); border-radius: 999px; padding: 9px 18px; font-size: .95rem; display: flex; gap: 8px; align-items: baseline; }
.fact span { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.fact b { font-weight: 700; }
.fact .tbd { font-size: .95rem; letter-spacing: 0; text-transform: none; font-weight: 500; font-style: italic; }
.scroll-hint { font-size: .75rem; letter-spacing: .24em; color: var(--muted); margin-top: 28px; }
.ep.mini .ep-in { min-height: 0; padding-block: 56px 48px; }
.ep.mini .ep-title { font-size: clamp(2.4rem, 7vw, 4.6rem); }
.ep.mini::before { width: 30vmax; height: 30vmax; }
.ep.mini::after { width: 26vmax; height: 26vmax; }
/* ---------- Sezioni pubbliche ---------- */
.sec { padding-block: 72px; border-top: 1px solid var(--line); display: grid; gap: 28px; }
.sec h2 { font-size: clamp(2rem, 5.5vw, 3.4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.sec h2 em { font-style: normal; color: var(--lime); }
.lede { color: var(--muted); max-width: 52ch; font-size: 1.08rem; }
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.pillar { border: 1px solid var(--line); border-radius: 22px; padding: 22px; display: grid; gap: 8px; align-content: start; background: linear-gradient(180deg, rgba(255,255,255,.035), transparent); }
.pillar .k { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--lime); }
.upcoming { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.upcoming li { display: grid; grid-template-columns: 5.2em minmax(0,1fr) auto; gap: 16px; align-items: center; border: 1px solid var(--line); border-radius: 18px; padding: 14px 20px; }
.upcoming .d { font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.upcoming .t { font-weight: 700; font-size: 1.1rem; overflow-wrap: anywhere; }
.upcoming .muted-box { display: block; color: var(--muted); border-style: dashed; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--sw, var(--lime)); }
footer { padding-block: 32px 48px; color: var(--muted); font-size: .88rem; border-top: 1px solid var(--line); }
@supports (animation-timeline: view()) {
.sec > * { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
@keyframes rise { from { transform: translateY(36px); } to { transform: none; } }
}
/* ---------- Staff: barra a pillola ---------- */
.staff { padding-block: 8px 72px; position: relative; isolation: isolate; }
.staff::before { content: ""; position: absolute; z-index: -1; width: 40vmax; height: 40vmax; left: -18vmax; top: -16vmax; border-radius: 50%; background: var(--violet); filter: blur(90px); opacity: .45; pointer-events: none; }
.staff-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-block: 8px 28px; }
.pill-nav { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px); overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.pill-nav button { border: 0; background: none; color: rgba(243,241,234,.72); font-size: 1rem; font-weight: 500; padding: 10px 22px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.pill-nav button:hover { color: var(--fg); }
.pill-nav button[aria-selected="true"] { background: var(--pink); color: #24121b; }
@media (max-width: 560px) { .pill-nav button { padding: 9px 14px; font-size: .92rem; } }
.bar-right { display: flex; gap: 8px; align-items: center; }
.ghost { border: 1px solid var(--line); background: none; color: var(--muted); border-radius: 999px; padding: 10px 18px; font-weight: 600; cursor: pointer; text-decoration: none; font-size: .95rem; text-align: center; }
.ghost:hover { color: var(--fg); }
.solid { border: 0; background: var(--fg); color: var(--bg); border-radius: 999px; padding: 11px 22px; font-weight: 700; cursor: pointer; font-size: .95rem; }
.staff-msg { color: var(--muted); border: 1px dashed var(--line); border-radius: 18px; padding: 16px 20px; margin-bottom: 18px; }
.pane { display: grid; gap: 20px; }
.pane-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; justify-content: space-between; }
.pane-head h1 { font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.pane-head h1 em { font-style: normal; color: var(--lime); }
/* ---------- Login ---------- */
.login { width: min(420px, 100%); margin: 6vh auto 0; border: 1px solid var(--line); border-radius: 28px; padding: 30px; display: grid; gap: 16px; background: rgba(26,28,36,.75); backdrop-filter: blur(16px); }
.login h1 { font-size: 2.2rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.login h1 em { font-style: normal; color: var(--lime); }
.login p { color: var(--muted); }
.field { display: grid; gap: 6px; font-weight: 600; font-size: .88rem; color: var(--muted); min-width: 0; }
.field input, .field textarea, .add input, .add select, .filters select {
font: inherit; font-size: .98rem; color: var(--fg); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px; min-width: 0; }
.field textarea { resize: vertical; min-height: 84px; }
.login .solid { padding: 14px; font-size: 1rem; }
.login label.field[for] { margin-bottom: -10px; }
.pass { position: relative; display: grid; }
.pass input { background: rgba(255,255,255,.75) !important; font: inherit; font-size: .98rem; color: var(--fg); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 14px; padding: 11px 52px 11px 14px; min-width: 0; }
.pass button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.pass button:hover { color: var(--fg); }
.pass button[aria-pressed="true"] .slash { display: none; }
.err { color: #ff8a7a; font-weight: 600; min-height: 1.4em; }
/* ---------- Calendario ---------- */
.cal-nav { display: flex; gap: 8px; align-items: center; }
.round { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--fg); font-size: 1.1rem; cursor: pointer; flex: none; }
.cal.from-left { --dx: -40px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal .wd { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 0 8px 4px; }
.day { min-height: 108px; border: 1px solid var(--line); border-radius: 16px; padding: 8px; display: flex; flex-direction: column; gap: 6px; background: rgba(255,255,255,.02); cursor: pointer; color: var(--fg); min-width: 0; }
.day:hover { border-color: rgba(255,255,255,.25); }
.day.out { opacity: .32; }
.day .n { font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; }
.day.today .n { background: var(--lime); color: #11140a; }
.ev { display: block; border-radius: 10px; padding: 6px 8px; font-size: .8rem; font-weight: 700; line-height: 1.2; cursor: pointer; background: var(--sw); color: var(--si); overflow-wrap: anywhere; }
.cal-hint { color: var(--muted); font-size: .9rem; }
@media (max-width: 640px) {
.cal { gap: 3px; }
.cal .wd { padding: 0 2px 4px; font-size: .62rem; letter-spacing: .06em; text-align: center; }
.day { min-height: 64px; padding: 4px; border-radius: 10px; align-items: center; }
.day .n { width: 24px; height: 24px; font-size: .8rem; }
.ev { font-size: 0; padding: 0; width: 12px; height: 12px; border-radius: 50%; }
}
/* ---------- Biblioteca ---------- */
.library { --bw: 130px; --bh: 184px; --gap-y: 64px; display: flex; flex-wrap: wrap; align-content: flex-start; column-gap: 26px; row-gap: var(--gap-y); padding: 26px 22px 0; border-radius: 26px; min-height: calc(var(--bh) + var(--gap-y) + 26px);
border: 1px solid var(--line); position: relative; isolation: isolate; overflow: hidden;
background:
linear-gradient(to bottom, transparent 0 calc(26px + var(--bh)), rgba(255,255,255,.2) calc(26px + var(--bh)), rgba(255,255,255,.06) calc(36px + var(--bh)), rgba(0,0,0,.35) calc(36px + var(--bh)), transparent calc(52px + var(--bh))) 0 0 / 100% calc(var(--bh) + var(--gap-y)) repeat-y,
rgba(255,255,255,.025); }
.library::before { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; right: -160px; bottom: -200px; border-radius: 50%; background: var(--ember); filter: blur(90px); opacity: .35; pointer-events: none; }
@media (max-width: 560px) { .library { --bw: 96px; --bh: 138px; --gap-y: 52px; column-gap: 14px; padding: 22px 14px 0; } }
.book { width: var(--bw); height: var(--bh); border: 0; padding: 12px 11px 10px; border-radius: 3px 6px 6px 3px; cursor: pointer; text-align: left; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
background: var(--sw); color: var(--si); box-shadow: inset 6px 0 0 rgba(0,0,0,.16), 0 12px 24px rgba(0,0,0,.45); transition: transform .25s cubic-bezier(.2,.8,.3,1.3), box-shadow .25s; }
.book:hover, .book:focus-visible { transform: translateY(-12px) rotate(-2deg); box-shadow: inset 6px 0 0 rgba(0,0,0,.16), 0 24px 34px rgba(0,0,0,.55), 0 0 30px -6px var(--sa); }
.book .bt { font-weight: 800; font-size: .98rem; line-height: 1.08; letter-spacing: -.02em; position: relative; z-index: 1; overflow-wrap: anywhere; }
.book .ba { font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; position: relative; z-index: 1; }
.book .art { position: absolute; left: 0; right: 0; top: 34%; bottom: 18%; }
@media (max-width: 560px) { .book .bt { font-size: .8rem; } .book .ba { font-size: .5rem; } }
.book.new { background: rgba(255,255,255,.03); border: 1.5px dashed rgba(255,255,255,.22); color: var(--muted); box-shadow: none; align-items: center; justify-content: center; text-align: center; gap: 6px; font-weight: 700; }
.book.new b { font-size: 2rem; line-height: 1; }
.book.live::after { content: "IN ONDA"; position: absolute; top: 12px; right: -30px; transform: rotate(45deg); background: var(--lime); color: #11140a; font-size: .55rem; font-weight: 800; letter-spacing: .12em; padding: 3px 32px; z-index: 2; }
.lib-head { color: var(--muted); }
/* copertine: motivi */
.p-sun { background: radial-gradient(circle at 50% 50%, var(--sa) 0 26%, transparent 27%); }
.p-stripes { background: repeating-linear-gradient(-45deg, var(--sa) 0 9px, transparent 9px 20px); }
.p-arcs { background: repeating-radial-gradient(circle at 0% 100%, transparent 0 7px, var(--sa) 7px 10px); }
.p-dots { background: radial-gradient(circle, var(--sa) 0 2.6px, transparent 3px) 0 0 / 15px 15px; left: 14px !important; right: 14px !important; }
.p-moon { background: radial-gradient(circle at 50% 100%, var(--sa) 0 38%, transparent 39%, transparent 45%, var(--sa) 46% 48%, transparent 49%); }
.p-tri { background: var(--sa); clip-path: polygon(45% 0, 100% 0, 100% 100%, 0 100%); }
.p-waves { background: repeating-radial-gradient(ellipse at 50% -40%, transparent 0 9px, var(--sa) 9px 11px); }
.p-grid { background: repeating-linear-gradient(90deg, var(--sa) 0 2px, transparent 2px 14px), repeating-linear-gradient(var(--sa) 0 2px, transparent 2px 14px); left: 12px !important; right: 12px !important; }
/* ---------- Libro aperto ---------- */
.sheet { position: fixed; inset: 0; z-index: 50; background: rgba(5,6,9,.72); backdrop-filter: blur(6px); overflow-y: auto; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.sheet-card { max-width: 1040px; margin: 2vh auto; background: var(--bg2); border: 1px solid var(--line); border-radius: 28px; overflow: hidden; }
.sheet-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.sheet-top .eyebrow { letter-spacing: .18em; }
.preview { border-bottom: 1px solid var(--line); }
.edit { padding: 22px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.edit .wide { grid-column: 1 / -1; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatches label { width: 44px; height: 60px; border-radius: 3px 6px 6px 3px; cursor: pointer; position: relative; overflow: hidden; background: var(--sw); box-shadow: inset 4px 0 0 rgba(0,0,0,.15); }
.swatches label .art { position: absolute; left: 0; right: 0; top: 30%; bottom: 12%; }
.swatches label .p-dots, .swatches label .p-grid { left: 5px !important; right: 5px !important; }
.swatches input { position: absolute; opacity: 0; }
.swatches label:has(input:checked) { outline: 3px solid var(--lime); outline-offset: 2px; }
.swatches label:has(input:focus-visible) { outline: 3px solid var(--fg); outline-offset: 2px; }
.edit-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.danger.armed { background: #ff6b57; color: #fff; border-color: transparent; }
/* ---------- Liste (compiti, materiale) ---------- */
.add { display: flex; flex-wrap: wrap; gap: 8px; border: 1px solid var(--line); border-radius: 22px; padding: 10px; background: rgba(255,255,255,.025); }
.add input, .add select { flex: 1 1 150px; border-radius: 999px; padding: 10px 16px; }
.add input:first-child { flex: 2 1 240px; }
.add .solid { flex: 0 0 auto; }
.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: .92rem; }
.filters select { border-radius: 999px; padding: 7px 14px; font-size: .9rem; }
.total { margin-left: auto; font-weight: 800; color: var(--fg); font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 18px; padding: 13px 16px; background: rgba(255,255,255,.02); }
.item.done { opacity: .5; }
.item.done .what { text-decoration: line-through; }
.what { font-weight: 700; overflow-wrap: anywhere; }
.sub { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .85rem; color: var(--muted); margin-top: 3px; align-items: center; }
.who { font-size: .78rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--pink); color: #24121b; }
.tag { font-size: .78rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--sw); color: var(--si); }
.check { width: 22px; height: 22px; accent-color: var(--lime); cursor: pointer; }
.del { font-size: .82rem; font-weight: 600; background: none; border: 1px solid transparent; color: var(--muted); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.del:hover { border-color: var(--line); }
.del.armed { background: #ff6b57; color: #fff; }
.empty { color: var(--muted); padding: 22px; text-align: center; border: 1px dashed var(--line); border-radius: 18px; }
/* ---------- Fluidità ---------- */
:root { --ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.34, 1.4, .64, 1); }
/* entrata a cascata: ogni elemento con .rv sale e si mette a fuoco, con ritardo --d */
.rv { animation: reveal .9s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes reveal { from { opacity: 0; transform: translateY(28px); filter: blur(10px); } }
/* titolo: ogni parola esce da sotto una maschera */
.ep-title .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; margin-bottom: -.06em; }
.ep-title .w > span { display: inline-block; animation: rise-w 1.1s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes rise-w { from { transform: translateY(105%) rotate(4deg); } }
.ep-title em.w { display: block; }
/* passaggio tra pagine e tra sezioni */
.page-in { animation: page-in .7s var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(6px); } }
.pane-in { animation: pane-in .55s var(--ease) both; }
.pane-in.from-left { --dx: -40px; }
@keyframes pane-in { from { opacity: 0; transform: translateX(var(--dx, 40px)); } }
.stagger > * { animation: reveal .7s var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: .04s } .stagger > *:nth-child(2) { animation-delay: .09s } .stagger > *:nth-child(3) { animation-delay: .14s }
.stagger > *:nth-child(4) { animation-delay: .19s } .stagger > *:nth-child(5) { animation-delay: .24s } .stagger > *:nth-child(6) { animation-delay: .29s }
.stagger > *:nth-child(7) { animation-delay: .34s } .stagger > *:nth-child(8) { animation-delay: .39s } .stagger > *:nth-child(n+9) { animation-delay: .44s }
/* indicatore rosa che scivola sotto la voce attiva */
.pill-nav { position: relative; }
.pill-nav .ink { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: var(--pink); transition: transform .5s var(--spring), width .5s var(--spring); z-index: 0; pointer-events: none; }
.pill-nav button { position: relative; z-index: 1; }
.pill-nav.ready button[aria-selected="true"] { background: none; }
/* finestra del libro */
.sheet { animation: fade .35s var(--ease) both; }
.sheet .sheet-card { animation: card-up .6s var(--ease) both; }
.sheet.closing { animation: fade .3s var(--ease) reverse both; }
.sheet.closing .sheet-card { animation: card-up .3s var(--ease) reverse both; }
@keyframes fade { from { opacity: 0; } }
@keyframes card-up { from { opacity: 0; transform: translateY(40px) scale(.96); } }
/* libri: si sfilano dallo scaffale */
.library.stagger > .book { animation-name: book-in; animation-duration: .8s; }
@keyframes book-in { from { opacity: 0; transform: translateY(40px) rotate(3deg); } }
.book { transition: transform .5s var(--spring), box-shadow .4s var(--ease); }
/* micro-interazioni */
.solid, .ghost, .round, .burger, .del, .day, .menu a { transition: transform .35s var(--spring), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.solid:active, .ghost:active, .round:active, .burger:active { transform: scale(.94); }
.day:hover { transform: translateY(-2px); }
.menu:not([hidden]) { animation: menu-in .45s var(--ease) both; transform-origin: top right; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
.ep-facts .fact { transition: transform .4s var(--spring), border-color .3s; }
.ep-facts .fact:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.25); }
/* ================= Stile Lumen: nero pieno, nastri iridescenti, maiuscole strette, carte bianche, arancio ================= */
.ep::before, .ep::after, .staff::before, .library::before { display: none; }
.ribbons { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.ep { background: #000; }
.ep-in { text-align: left; place-items: start; align-content: center; justify-items: start; min-height: calc(100vh - 84px); padding-block: 48px 24vw; }
.ep-title { text-transform: uppercase; font-size: clamp(3.2rem, 12vw, 8.6rem); letter-spacing: -.06em; line-height: .86; max-width: none; }
.ep-title .w { display: inline-block; }
.ep-sub { color: rgba(244,244,242,.7); max-width: 40ch; }
.ep-sub b { color: var(--fg); }
.ep-in > .rv:last-child { justify-self: stretch; }
.ep-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; justify-content: start; width: min(720px, 100%); }
.fact { background: var(--paper); color: var(--ink); border: 0; border-radius: 14px; padding: 16px 18px; display: grid; gap: 22px; align-content: space-between; min-height: 112px; backdrop-filter: none; }
.fact:first-child { background: var(--lime); color: var(--on-accent); }
.fact span { color: inherit; opacity: .6; }
.fact b { font-size: 1.05rem; line-height: 1.2; }
.fact .tbd { font-style: normal; opacity: .55; }
.ep-facts .fact:hover { border-color: transparent; }
.giant { position: absolute; left: 0; right: 0; bottom: 0; transform: translateY(18%); text-align: center; font-weight: 800; font-size: 19.5vw; line-height: .8; letter-spacing: -.07em; white-space: nowrap; color: var(--fg); pointer-events: none; z-index: 0;
background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,.35)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: giant-in 1.4s var(--ease) .2s both; }
@keyframes giant-in { from { transform: translateY(60%); } }
.ep.mini .ep-in { padding-block: 40px 13vw; min-height: 0; }
.ep.mini .ep-title { font-size: clamp(2.4rem, 7vw, 5rem); }
.ep.mini .giant { font-size: 17vw; }
@media (min-width: 1100px) { .ep.mini .giant { font-size: 180px; } .ep.mini .ep-in { padding-block: 40px 150px; } }
.eyebrow { color: rgba(244,244,242,.55); }
/* titoli maiuscoli, senza parola colorata */
.pane-head h1, .login h1 { text-transform: uppercase; letter-spacing: -.055em; line-height: .9; }
.pane-head h1 em, .login h1 em { color: inherit; }
/* pulsanti */
.solid { background: var(--lime); color: var(--on-accent); }
.solid:hover { background: #bff5de; }
.pill-nav .ink { background: var(--lime); }
.pill-nav button[aria-selected="true"] { color: var(--on-accent); }
.pill-nav { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.logo i { background: var(--lime); box-shadow: 0 0 18px var(--lime); }
/* login: carta bianca */
.login { background: var(--paper); color: var(--ink); border: 0; backdrop-filter: none; }
.login p, .login .field { color: #5a5a5a; }
.login .eyebrow { color: #8a8a8a; }
.login .field input, .pass input { background: #e7e7e4; color: var(--ink); border-color: transparent; }
.pass button { color: #6a6a6a; }
.pass button:hover { color: var(--ink); }
.login .ghost { color: #5a5a5a; border-color: rgba(0,0,0,.12); }
.login .ghost:hover { color: var(--ink); }
.err { color: #d63c0c; }
/* calendario */
.day { background: #0d0d0d; border-color: rgba(255,255,255,.07); }
.day.today .n { background: var(--lime); color: var(--on-accent); }
/* liste: carte bianche */
.item { background: var(--paper); color: var(--ink); border: 0; }
.item .sub, .item .del { color: #6a6a6a; }
.item .del:hover { border-color: rgba(0,0,0,.12); }
.item .who { background: var(--ink); color: #fff; }
.check { accent-color: var(--lime); }
.add { background: #0d0d0d; }
.add .solid { padding-inline: 26px; }
/* libreria */
.library { background:
linear-gradient(to bottom, transparent 0 calc(26px + var(--bh)), rgba(255,255,255,.22) calc(26px + var(--bh)), rgba(255,255,255,.05) calc(36px + var(--bh)), rgba(0,0,0,.6) calc(36px + var(--bh)), transparent calc(52px + var(--bh))) 0 0 / 100% calc(var(--bh) + var(--gap-y)) repeat-y,
radial-gradient(120% 90% at 100% 100%, rgba(168,240,210,.07), transparent 60%), #0b0b0b; }
.book.live::after { background: var(--lime); color: var(--on-accent); }
/* un solo colore d'accento: eventi e etichette in menta / neutro */
.ev { background: var(--lime) !important; color: var(--on-accent) !important; }
.item .tag { background: transparent !important; color: #3a3a3a !important; border: 1px solid rgba(0,0,0,.18); }
.book.new { color: rgba(244,244,242,.7); border-color: rgba(255,255,255,.3); }
/* finestra libro */
.sheet-card { background: #0b0b0b; }
.swatches label:has(input:checked) { outline-color: var(--lime); }
/* ================= Home nera con l'omino-interruttore ================= */
#public { background: #000; }
.home { position: relative; min-height: calc(100vh - 84px); min-height: calc(100dvh - 84px); display: grid; place-items: center; background: #000; padding-block: 40px; }
.hint { position: absolute; top: -4px; right: calc(max(16px, env(safe-area-inset-right, 0px)) + 16px); display: grid; justify-items: end; text-decoration: none; color: var(--lime); }
.hint svg { width: 110px; height: 84px; overflow: visible; fill: none; stroke: var(--lime); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(168,240,210,.35)); }
.hint .shaft { stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw 1.1s var(--ease) .5s forwards; }
.hint .head { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .4s var(--ease) 1.45s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hint span { margin: -8px 96px 0 0; display: grid; text-align: right; font-size: 1rem; font-weight: 500; line-height: 1.25; color: rgba(244,244,242,.75); animation: reveal .8s var(--ease) .3s both; }
.hint span b { font-weight: 800; font-size: 1.35rem; letter-spacing: -.03em; color: var(--lime); }
.hint { pointer-events: none; user-select: none; }
@media (max-width: 560px) { .hint svg { width: 80px; height: 62px; } .hint span { margin-right: 70px; font-size: .9rem; } .hint span b { font-size: 1.15rem; } }
@media (prefers-reduced-motion: reduce) { .hint .shaft, .hint .head { stroke-dashoffset: 0; } }
#dots { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
body { background: #000; }
.hint { z-index: 1; }
/* in basso a sinistra: pulsante archivio + indicazione */
.arch-btn { position: fixed; z-index: 5; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 48px; height: 48px; display: grid; place-content: center; gap: 7px; }
.arch-btn span { display: block; width: 26px; height: 2.5px; border-radius: 2px; background: var(--lime); transition: transform .35s var(--spring); }
.arch-btn:hover span:first-child { transform: translateX(3px); } .arch-btn:hover span:last-child { transform: translateX(-3px); }
.arch-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 10px; }
.hint-left { position: fixed; top: auto; right: auto; left: calc(max(16px, env(safe-area-inset-left, 0px)) + 16px); bottom: calc(66px + env(safe-area-inset-bottom, 0px)); justify-items: start; }
.hint-left span { margin: 0 0 -8px 96px; text-align: left; }
@media (max-width: 560px) { .hint-left span { margin-left: 70px; } }
/* archivio */
.archive { min-height: 100vh; }
.arch-lede { color: var(--muted); max-width: 52ch; margin-top: -6px; }
.p-pumpkin { left: 8px !important; right: 8px !important; top: 26% !important; bottom: 16% !important; }
.p-pumpkin svg { width: 100%; height: 100%; display: block; }
.book .pumpkin-ba { color: #f6b46b; }
.recap .recap-head { position: relative; height: 180px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(60% 90% at 50% 100%, rgba(242,140,40,.35), transparent 70%), #120c08; border-bottom: 1px solid var(--line); }
.recap .recap-head svg { height: 150px; filter: drop-shadow(0 18px 30px rgba(242,140,40,.35)); animation: card-up .8s var(--ease) .1s both; }
.recap-body { padding: 26px clamp(18px, 4vw, 40px) 36px; display: grid; gap: 18px; }
.recap-body h2 { font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 800; letter-spacing: -.05em; line-height: .95; text-transform: uppercase; }
.recap-text { color: rgba(244,244,242,.82); font-size: 1.05rem; max-width: 62ch; display: grid; gap: 12px; }
.recap-text .soon, .photos .soon { color: var(--muted); border: 1px dashed var(--line); border-radius: 16px; padding: 18px; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.photos button { padding: 0; border: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 1; cursor: zoom-in; background: #111; }
.photos img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.photos button:hover img { transform: scale(1.05); }
.photos .soon { grid-column: 1 / -1; }
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.92); display: grid; place-items: center; padding: 64px max(16px, env(safe-area-inset-right, 0px)) 64px max(16px, env(safe-area-inset-left, 0px)); animation: fade .3s var(--ease) both; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 128px); border-radius: 12px; animation: card-up .45s var(--ease) both; }
.lb-close { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { left: max(16px, env(safe-area-inset-left, 0px)); } .lb-next { right: max(16px, env(safe-area-inset-right, 0px)); }
.lightbox img.lb-anim { animation: card-up .4s var(--ease) both; }
.lb-count { position: absolute; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; text-align: center; color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.toggle { z-index: 1; position: relative; width: 132px; height: 68px; border-radius: 999px; border: 3px solid #6f7484; background: transparent; padding: 0; cursor: pointer; zoom: var(--sc, 1.7); -webkit-tap-highlight-color: transparent; }
@media (max-width: 560px) { .toggle { --sc: 1.3; } }
.toggle:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.buddy { position: absolute; left: 5px; bottom: 9px; width: 52px; display: flex; flex-direction: column; align-items: center; transform: translateX(0); }
.body { width: 52px; height: 52px; border-radius: 50%; background: #eef0f5; position: relative; z-index: 1; transform-origin: 50% 100%; }
.face { position: absolute; inset: 0; opacity: 0; transform: translateX(var(--look, 0)); transition: transform .3s; }
.face i { position: absolute; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: #0b0d14; }
.face i:first-child { left: 13px; } .face i:nth-child(2) { right: 13px; }
.face b { position: absolute; left: 50%; top: 27px; width: 12px; height: 6px; margin-left: -6px; border-radius: 0 0 12px 12px; background: #0b0d14; }
.legs { height: 0; width: 26px; position: relative; margin-top: -4px; }
.legs i { position: absolute; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: #fff; transform-origin: 50% 0; }
.legs i:first-child { left: 5px; } .legs i:last-child { right: 5px; }
.legs i::after { content: ""; position: absolute; bottom: 0; left: -1px; width: 9px; height: 3px; border-radius: 2px; background: #fff; }
.walking .legs i:first-child { animation: step .28s ease-in-out infinite alternate; }
.walking .legs i:last-child { animation: step .28s ease-in-out infinite alternate-reverse; }
@keyframes step { from { transform: rotate(18deg); } to { transform: rotate(-18deg); } }
.walking .body { animation: bob .28s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-3px); } }
.bubble { position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 0; background: #fff; color: #0a0a0a; font-weight: 800; font-size: 13px; letter-spacing: -.01em; padding: 6px 11px; border-radius: 12px; white-space: nowrap; opacity: 0; scale: .4; transform-origin: 50% 100%; transition: opacity .2s, scale .35s cubic-bezier(.34,1.6,.64,1); pointer-events: none; }
.bubble::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #fff; }
.bubble.show { opacity: 1; scale: 1; }
.dust { position: absolute; bottom: 4px; width: 9px; height: 9px; border-radius: 50%; background: #7c8190; pointer-events: none; }
/* ================= Area staff: dashboard chiara (Urbanist, lavanda, cielo, rosa) ================= */
body.staff-mode { background: #f3effd; }
body.staff-mode #dots { display: none; }
.staff-mode .top { background: transparent; }
.staff-mode .top .wrap { max-width: 1320px; }
.staff-mode .logo { color: #1d1460; }
.staff-mode .logo i { background: #1d1460; box-shadow: none; }
.staff-mode .burger span { background: #1d1460; }
.light { --d-ink: #1d1460; --d-mute: #6b6b6b; --d-lav: #e4dcfb; --d-bg: #f3effd; --d-sky: #d6e6f5; --d-rose: #efd9ec; --d-card: rgba(255,255,255,.72); --d-line: rgba(29,20,96,.08);
font-family: "Archivo", system-ui, sans-serif; color: var(--d-ink); background: radial-gradient(60% 50% at 10% 0%, #f3effd, transparent 70%), radial-gradient(50% 50% at 100% 30%, #f3effd, transparent 70%), var(--d-bg); min-height: calc(100vh - 84px); padding-top: 0; }
.light::before { display: none; }
.light .wrap { max-width: 1320px; }
/* login chiaro */
.light .login { background: #fff; box-shadow: 0 30px 60px rgba(29,20,96,.08); }
.light .login .solid, .light .solid { background: var(--d-ink); color: #fff; }
.light .solid:hover { background: #3f3bb5; }
.light .ghost { color: var(--d-ink); border-color: rgba(29,20,96,.15); background: rgba(255,255,255,.6); }
.light .err { color: #c2410c; }
/* impaginazione: barra laterale + contenuto */
.dash { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 22px; align-items: start; background: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.8); border-radius: 32px; padding: 18px; box-shadow: 0 30px 80px rgba(29,20,96,.08); backdrop-filter: blur(12px); }
.side { position: sticky; top: 16px; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 6px 0; min-height: 70vh; }
.side-logo { width: 46px; height: 46px; border-radius: 14px; background: var(--d-ink); display: grid; place-items: center; }
.side-logo i { width: 18px; height: 18px; border-radius: 50%; border: 4px solid #fff; position: relative; }
.side-logo i::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; right: -1px; top: -1px; }
.light .pill-nav { flex-direction: column; background: none; border: 0; padding: 0; gap: 8px; overflow: visible; backdrop-filter: none; border-radius: 0; }
.light .pill-nav .ink { top: 0; bottom: auto; left: 0; border-radius: 16px; background: var(--d-ink); }
.light .pill-nav button { width: 76px; padding: 10px 4px 8px; border-radius: 16px; display: grid; justify-items: center; gap: 4px; color: var(--d-mute); font-size: .72rem; font-weight: 600; white-space: normal; line-height: 1.1; }
.light .pill-nav button svg, .side-out svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.light .pill-nav button:hover { color: var(--d-ink); background: rgba(29,20,96,.05); }
.light .pill-nav button[aria-selected="true"] { color: #fff; }
.light .pill-nav.ready button[aria-selected="true"]:hover { background: none; }
.side-out { margin-top: auto; border: 0; background: none; color: var(--d-mute); display: grid; justify-items: center; gap: 4px; font-size: .72rem; font-weight: 600; cursor: pointer; padding: 8px; border-radius: 14px; }
.side-out:hover { color: var(--d-ink); background: rgba(29,20,96,.05); }
.dash-main { display: grid; gap: 22px; min-width: 0; padding: 6px 4px 8px; }
.dash-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.dash-head h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.dash-head p { color: var(--d-mute); font-size: .95rem; margin-top: 2px; }
.light .staff-msg { border-color: rgba(29,20,96,.15); color: var(--d-mute); background: rgba(255,255,255,.6); }
.light .pane-head h1 { text-transform: none; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.light .pane-head h1 em { color: inherit; }
.light .lib-head, .light .cal-hint, .light .filters { color: var(--d-mute); }
.muted-s { color: var(--d-mute); font-size: .85rem; }
/* carte */
.card { background: var(--d-card); border: 1px solid rgba(255,255,255,.9); border-radius: 22px; padding: 18px; box-shadow: 0 1px 0 rgba(29,20,96,.03); min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-head h2, .card-head h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; }
.card-head svg { width: 20px; height: 20px; fill: none; stroke: var(--d-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.ov-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); gap: 16px; }
.ov-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ov-side { grid-row: span 2; display: grid; gap: 12px; align-content: start; }
.stat { display: grid; gap: 4px; align-content: start; }
.c-lav { background: linear-gradient(180deg, #e7e5fc, #e4dcfb); }
.c-sky { background: linear-gradient(180deg, #f8efcc, #f1e2a9); }
.c-rose { background: linear-gradient(180deg, #f4effd, #e6def8); }
.big { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; margin-top: 8px; font-variant-numeric: tabular-nums; }
.chip { font-size: .72rem; font-weight: 700; letter-spacing: 0; background: rgba(255,255,255,.85); color: var(--d-ink); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.chip.dark { background: var(--d-ink); color: #fff; }
.bars { height: 110px; display: flex; align-items: flex-end; gap: 8px; margin-top: 14px; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; min-width: 0; }
.bar i { display: block; border-radius: 10px; transform-origin: bottom; animation: grow .9s var(--ease) both; }
.bar:nth-child(2) i { animation-delay: .06s } .bar:nth-child(3) i { animation-delay: .12s } .bar:nth-child(4) i { animation-delay: .18s } .bar:nth-child(5) i { animation-delay: .24s } .bar:nth-child(6) i { animation-delay: .3s }
@keyframes grow { from { transform: scaleY(0); } }
.b-base { background: linear-gradient(180deg, #555555, #1d1460); }
.b-top.hatch, .b-base:only-child.hatch { background: repeating-linear-gradient(-45deg, rgba(29,20,96,.45) 0 2px, transparent 2px 7px), rgba(255,255,255,.5); }
.b-top.dots { background: radial-gradient(circle, rgba(29,20,96,.45) 0 1.3px, transparent 1.6px) 0 0 / 7px 7px, rgba(255,255,255,.55); }
.c-lav .b-base { background: repeating-linear-gradient(-45deg, rgba(29,20,96,.5) 0 2px, transparent 2px 7px), rgba(255,255,255,.55); }
.c-rose .b-base { background: linear-gradient(180deg, #8a8a8a, #1d1460); }
.bar-lbl { display: flex; gap: 8px; } .bar-lbl span { flex: 1; text-align: center; font-size: .72rem; color: var(--d-mute); text-transform: capitalize; }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.people li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--d-line); }
.people li:last-child { border-bottom: 0; }
.avatar { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--d-lav); font-weight: 700; }
.p-mid { display: grid; gap: 6px; min-width: 0; } .p-mid b { font-weight: 600; overflow-wrap: anywhere; }
.prog { height: 4px; border-radius: 4px; background: rgba(29,20,96,.1); overflow: hidden; } .prog i { display: block; height: 100%; background: var(--d-ink); border-radius: 4px; }
.ov-pipe { display: grid; gap: 12px; }
.pipe-scroll { overflow-x: auto; }
.pipe { width: 100%; border-collapse: separate; border-spacing: 6px; font-size: .9rem; min-width: 620px; }
.pipe thead th { font-weight: 500; color: var(--d-mute); text-align: center; padding: 8px 4px; background: rgba(255,255,255,.7); }
.pipe thead th:first-child { text-align: left; border-radius: 12px 0 0 12px; padding-left: 12px; color: var(--d-ink); font-weight: 600; }
.pipe thead th:last-child { border-radius: 0 12px 12px 0; }
.pipe tbody th { text-align: left; font-weight: 600; color: var(--d-ink); padding-left: 6px; }
.pipe tbody tr { cursor: pointer; }
.pipe tbody tr:hover .cell { filter: brightness(.97); }
.cell { display: grid; place-items: center; min-height: 44px; border-radius: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cell.lav { background: #e3f1fa; } .cell.sky { background: #f6ecc6; } .cell.rose { background: #ede6fb; } .cell.date { background: rgba(255,255,255,.75); } .cell.empty { background: rgba(255,255,255,.4); color: var(--d-mute); }
/* calendario chiaro */
.light .round { background: #fff; color: var(--d-ink); border-color: rgba(29,20,96,.1); }
.light .cal .wd { color: var(--d-mute); }
.light .day { background: rgba(255,255,255,.7); border-color: rgba(255,255,255,.95); color: var(--d-ink); }
.light .day:hover { border-color: var(--d-lav); background: #fff; }
.light .day.today .n { background: var(--d-ink); color: #fff; }
.light .ev { background: var(--d-lav) !important; color: var(--d-ink) !important; }
/* libreria chiara */
.light .library { border-color: rgba(255,255,255,.9); background:
linear-gradient(to bottom, transparent 0 calc(26px + var(--bh)), #cfcaf0 calc(26px + var(--bh)), #e4e1fa calc(36px + var(--bh)), rgba(29,20,96,.12) calc(36px + var(--bh)), transparent calc(50px + var(--bh))) 0 0 / 100% calc(var(--bh) + var(--gap-y)) repeat-y,
rgba(255,255,255,.6); }
.light .book { box-shadow: inset 6px 0 0 rgba(0,0,0,.14), 0 10px 18px rgba(29,20,96,.18); }
.light .book:hover, .light .book:focus-visible { box-shadow: inset 6px 0 0 rgba(0,0,0,.14), 0 22px 30px rgba(29,20,96,.25); }
.light .book.new { background: rgba(255,255,255,.6); color: var(--d-mute); border-color: rgba(29,20,96,.25); box-shadow: none; }
.light .book.live::after { background: var(--d-ink); color: #fff; }
/* liste chiare */
.light .add { background: rgba(255,255,255,.7); border-color: rgba(255,255,255,.95); }
.light .add input, .light .add select, .light .filters select { background: #fff; color: var(--d-ink); border-color: rgba(29,20,96,.1); }
.light .item { background: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.95); }
.light .item .who { background: var(--d-ink); color: #fff; }
.light .check { accent-color: var(--d-ink); }
.light .total { color: var(--d-ink); }
.light .empty { border-color: rgba(29,20,96,.15); color: var(--d-mute); }
@media (max-width: 1080px) { .ov-grid { grid-template-columns: 1fr; } .ov-side { grid-row: auto; } }
@media (max-width: 760px) {
.dash { grid-template-columns: 1fr; padding: 10px; border-radius: 24px; }
.side { position: static; flex-direction: row; min-height: 0; gap: 8px; padding: 0; overflow-x: auto; }
.side-logo { display: none; }
.light .pill-nav { flex-direction: row; }
.light .pill-nav button { width: 70px; }
.side-out { margin: 0 0 0 auto; }
.ov-cards { grid-template-columns: 1fr; }
}
/* ================= Sito pubblico chiaro + minigioco ================= */
body.staff-mode { color: #1d1460; }
#public { background: transparent; }
.light .home { background: transparent; min-height: calc(100dvh - 84px); padding-block: 96px 170px; place-items: center; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.staff-mode .logo { color: #1d1460; }
.staff-mode .menu { background: rgba(255,255,255,.92); border-color: rgba(29,20,96,.08); box-shadow: 0 20px 40px rgba(29,20,96,.12); }
.staff-mode .menu .to-staff { background: #1d1460; color: #fff; }
.staff-mode .menu .to-staff:hover { background: #3f3bb5; }
.light .hint { color: #1d1460; }
.light .hint svg { stroke: #1d1460; filter: none; opacity: .75; }
.light .hint span { color: #6b6b6b; }
.light .hint span b { color: #1d1460; }
.light .arch-btn span { background: #1d1460; }
.light .arch-btn:focus-visible { outline-color: #1d1460; }
.staff-mode :focus-visible { outline-color: #1d1460; }
.game { width: min(760px, 100%); display: grid; gap: 14px; padding: 18px; background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.95); border-radius: 28px; box-shadow: 0 30px 80px rgba(29,20,96,.08); position: relative; z-index: 1; }
.game-head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: flex-start; }
.game-head h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.game-head p { color: var(--d-mute); font-size: .92rem; max-width: 42ch; margin-top: 2px; }
.scores { display: flex; gap: 6px; } .scores .chip { font-size: .85rem; padding: 5px 12px; font-variant-numeric: tabular-nums; background: #fff; }
.scores .chip.dark { background: #1d1460; color: #fff; }
.game-stage { position: relative; height: 240px; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #ecebe7 0%, #f6f5fb 70%, #efedf8 100%); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.game-stage canvas { width: 100%; height: 100%; display: block; }
.game-over { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px; pointer-events: none; }
.game-over b { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: #1d1460; background: rgba(255,255,255,.85); border-radius: 14px; padding: 6px 16px; justify-self: center; animation: card-up .45s var(--ease) both; }
.game-over span { color: #6b6b6b; font-size: .9rem; }
@media (max-width: 560px) { .light .home { padding-block: 104px 180px; } .game { padding: 14px; border-radius: 22px; } .game-stage { height: 210px; } .game-head h1 { font-size: 1.35rem; } }
/* finestre chiare */
.staff-mode .sheet { background: rgba(29,20,96,.35); }
.staff-mode .sheet-card { background: #ffffff; color: #1d1460; border-color: rgba(255,255,255,.9); box-shadow: 0 40px 90px rgba(29,20,96,.25); }
.staff-mode .sheet-top { border-color: rgba(29,20,96,.08); }
.staff-mode .sheet-top .eyebrow { color: #6b6b6b; }
.staff-mode .sheet .round { background: #fff; color: #1d1460; border-color: rgba(29,20,96,.1); }
.staff-mode .field { color: #6b6b6b; }
.staff-mode .field input, .staff-mode .field textarea { background: #fff; color: #1d1460; border-color: rgba(29,20,96,.12); }
.staff-mode .edit .solid { background: #1d1460; color: #fff; }
.staff-mode .edit .ghost { color: #1d1460; border-color: rgba(29,20,96,.15); }
.staff-mode .swatches label:has(input:checked) { outline-color: #1d1460; }
.staff-mode .recap .recap-head { background: radial-gradient(60% 90% at 50% 100%, rgba(242,140,40,.25), transparent 70%), linear-gradient(180deg, #ecebe7, #ffffff); border-color: rgba(29,20,96,.08); }
.staff-mode .recap-text { color: #3a3a3a; }
.staff-mode .recap-text .soon, .staff-mode .photos .soon { color: #6b6b6b; border-color: rgba(29,20,96,.15); }
.staff-mode .photos button { background: #ecebe7; }
.light .arch-lede { color: #6b6b6b; }
/* ================= Home: saluto + libreria ================= */
.light .home { display: grid; place-items: initial; align-content: start; gap: 28px; max-width: 1120px; margin: 0 auto; padding-block: 120px 80px; }
.hello { display: grid; gap: 14px; max-width: 780px; }
.hello h1 { font-size: clamp(2.5rem, 7.5vw, 4.6rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; color: #1d1460; }
.hello h1 em { font-style: normal; background: linear-gradient(transparent 62%, #e4dcfb 62%); padding: 0 .08em; }
.hello > p { font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: #6b6b6b; max-width: 46ch; }
.hello .eyebrow { color: #6b6b6b; letter-spacing: .2em; }
.hello-row { display: flex; align-items: center; gap: 14px; }
.sleepy { position: relative; width: 46px; height: 46px; border-radius: 50%; background: #1d1460; flex: none; }
.sleepy i { position: absolute; top: 20px; width: 9px; height: 5px; border-bottom: 2px solid #fff; border-radius: 0 0 9px 9px; }
.sleepy i:first-of-type { left: 11px; } .sleepy i:last-of-type { right: 11px; }
.sleepy em { position: absolute; left: 38px; top: -4px; font-style: normal; font-weight: 800; font-size: 13px; color: #6b6b6b; opacity: 0; animation: zz 3s ease-in-out infinite; }
.sleepy em:nth-of-type(2) { animation-delay: 1s; } .sleepy em:nth-of-type(3) { animation-delay: 2s; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 6px) scale(.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -18px) scale(1.2); } }
.next-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }
.next-pill { display: grid; gap: 2px; background: #fff; border: 1px solid rgba(255,255,255,.95); border-radius: 20px; padding: 14px 20px; box-shadow: 0 14px 40px rgba(29,20,96,.08); min-width: 0; }
.next-pill span { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6b6b6b; }
.next-pill b { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.next-pill small { color: #6b6b6b; font-size: .9rem; }
.to-lib { text-decoration: none; color: #fff; background: #1d1460; border-radius: 999px; padding: 13px 22px; font-weight: 600; display: inline-flex; gap: 8px; transition: transform .35s var(--spring), background .25s; }
.to-lib:hover { background: #3f3bb5; } .to-lib:hover span { transform: translateY(2px); } .to-lib span { transition: transform .3s var(--spring); }
.facts-l { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; max-width: 640px; }
.fact-l { background: #fff; border-radius: 18px; padding: 14px 18px; display: grid; gap: 14px; box-shadow: 0 14px 40px rgba(29,20,96,.07); }
.fact-l:first-child { background: #1d1460; color: #fff; }
.fact-l span { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.fact-l b { font-size: 1.1rem; font-weight: 600; }
.shelf-card { background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.95); border-radius: 32px; padding: clamp(18px, 3vw, 30px); box-shadow: 0 30px 80px rgba(29,20,96,.08); display: grid; gap: 26px; scroll-margin-top: 20px; }
.lib-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.lib-top h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; margin-top: 4px; }
.lib-top p { color: #6b6b6b; margin-top: 4px; }
.lib-top .eyebrow { color: #6b6b6b; letter-spacing: .18em; font-size: .72rem; }
.lib-top .chip { background: #1d1460; color: #fff; font-size: .8rem; padding: 5px 12px; }
.shelves { display: grid; gap: 34px; }
.shelf { position: relative; }
.shelf .row { display: flex; align-items: flex-end; gap: 28px; padding: 0 12px; min-height: 196px; position: relative; z-index: 1; }
.plank { height: 18px; margin-top: -2px; border-radius: 6px 6px 10px 10px; background: linear-gradient(180deg, #f1effd 0%, #e2dff9 45%, #cdc8f1 100%); box-shadow: 0 16px 22px -10px rgba(29,20,96,.35), inset 0 1px 0 #fff; position: relative; }
.plank::after { content: ""; position: absolute; left: 3%; right: 3%; top: 100%; height: 10px; background: linear-gradient(180deg, rgba(29,20,96,.12), transparent); border-radius: 0 0 50% 50%; }
.tome { width: 128px; height: 184px; flex: none; padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px; position: relative; animation: book-in .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.tome .cover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 13px 12px 11px; text-align: left; border-radius: 4px 8px 8px 4px; background: var(--sw); color: var(--si); overflow: hidden;
box-shadow: inset 7px 0 0 rgba(0,0,0,.16), inset 8px 0 0 rgba(255,255,255,.08), 0 10px 18px -6px rgba(29,20,96,.35); transform-origin: left center; transition: transform .6s var(--spring), box-shadow .5s var(--ease); }
.tome::after { content: ""; position: absolute; top: 5px; bottom: 5px; right: -5px; width: 6px; border-radius: 0 3px 3px 0; background: repeating-linear-gradient(180deg, #fff 0 1px, #e7e4f3 1px 2px); box-shadow: 1px 0 0 rgba(29,20,96,.12); z-index: -1; transition: transform .6s var(--spring); }
.tome:hover .cover, .tome:focus-visible .cover { transform: translateY(-10px) rotateY(-24deg); box-shadow: inset 7px 0 0 rgba(0,0,0,.16), 18px 22px 30px -10px rgba(29,20,96,.4); }
.tome:hover::after, .tome:focus-visible::after { transform: translateY(-10px); }
.tome:focus-visible { outline: none; } .tome:focus-visible .cover { outline: 2px solid #1d1460; outline-offset: 4px; }
.tome .bt { font-weight: 800; font-size: 1rem; line-height: 1.08; letter-spacing: -.02em; position: relative; z-index: 1; overflow-wrap: anywhere; }
.tome .ba { font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .9; position: relative; z-index: 1; }
.tome .art { position: absolute; left: 0; right: 0; top: 34%; bottom: 18%; }
.tome.ghost { cursor: default; animation: none; border: 0; border-radius: 0; background: none; padding: 0; } .tome.ghost::after { display: none; }
.tome.ghost .cover { background: rgba(255,255,255,.5); border: 1.5px dashed rgba(29,20,96,.22); box-shadow: none; color: #6b6b6b; align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: .78rem; font-weight: 600; }
.tome.ghost .cover b { font-size: 2rem; line-height: 1; font-weight: 700; color: rgba(29,20,96,.35); }
@media (max-width: 560px) {
.light .home { padding-block: 110px 60px; }
.shelf .row { gap: 12px; padding: 0 6px; min-height: 146px; }
.tome { width: 92px; height: 134px; } .tome .cover { padding: 10px 9px 9px; } .tome .bt { font-size: .78rem; } .tome .ba { font-size: .48rem; letter-spacing: .1em; }
}
/* ================= Stile "risograph": lilla granuloso, serif morbido indaco, giallo burro ================= */
:root { --serif: "Fraunces", "Georgia", serif; --indigo: #1d1460; --butter: #c3b5ef; }
body.staff-mode { background: radial-gradient(90% 70% at 15% 10%, #f5f4f0, transparent 60%), radial-gradient(80% 70% at 90% 90%, #d6cdee, transparent 60%), #f3effd; color: var(--indigo); }
body.staff-mode::after { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .22; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,"); }
.light, #staff.light { background: transparent !important; }
.dash { background: rgba(255,255,255,.35); }
.hello h1, .lib-top h2, .dash-head h1, .light .pane-head h1, .login h1, .recap-body h2, .big, .next-pill b, .tome .bt, .book .bt, .arch-lede + .library .bt {
font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; }
.staff-mode .logo { font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 800; letter-spacing: -.02em; color: var(--indigo); }
.staff-mode .logo i { background: var(--indigo); }
/* home centrata come un manifesto */
.light .home { position: relative; }
.hello { justify-items: center; text-align: center; margin: 0 auto; max-width: 900px; }
.hello h1 { font-weight: 900; font-size: clamp(3rem, 10vw, 7rem); line-height: .92; letter-spacing: -.035em; color: var(--indigo); }
.hello h1 em { background: none; position: relative; z-index: 0; }
.hello h1 em::after { content: ""; position: absolute; left: -.06em; right: -.06em; bottom: .06em; height: .32em; background: var(--butter); border-radius: 40% 60% 50% 50% / 60% 50% 50% 40%; z-index: -1; }
.hello > p { color: #5a5a5a; margin: 0 auto; }
.hello .eyebrow, .hello-row .eyebrow { color: var(--indigo); font-weight: 700; letter-spacing: .18em; }
.hello-row { justify-content: center; }
.sleepy { background: var(--indigo); }
.next-row { justify-content: center; }
.next-pill { background: rgba(255,255,255,.75); text-align: center; border: 2px solid var(--indigo); border-radius: 30px 38px 28px 40px / 34px 28px 38px 30px; padding: 16px 30px; box-shadow: none; }
.next-pill span, .next-pill small { color: #5a5a5a; }
.to-lib { background: var(--indigo); border-radius: 48% 52% 46% 54% / 62% 48% 52% 38%; padding: 15px 26px; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; font-size: .9rem; }
.facts-l { margin: 0 auto; }
.fact-l { border: 2px solid var(--indigo); box-shadow: none; background: rgba(255,255,255,.7); border-radius: 22px 26px 20px 28px; }
.fact-l:first-child { background: var(--indigo); }
.deco { position: absolute; top: 130px; width: clamp(54px, 9vw, 110px); fill: none; stroke: var(--butter); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; filter: blur(1.2px) drop-shadow(0 0 10px rgba(200,240,60,.9)); opacity: .9; animation: sway 6s ease-in-out infinite alternate; }
.deco-l { left: 2%; } .deco-r { right: 2%; animation-delay: -3s; }
@keyframes sway { to { transform: rotate(-8deg) translateY(8px); } }
@media (max-width: 700px) { .deco { display: none; } }
/* frecce/indicazioni e menu: bordi disegnati a mano */
.light .hint svg { stroke: var(--indigo); opacity: .9; stroke-width: 2.8; }
.light .hint span { color: #5a5a5a; } .light .hint span b { color: var(--indigo); font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 800; }
.staff-mode .burger span { background: var(--indigo); height: 3px; }
.staff-mode .menu { background: rgba(244,240,252,.95); border: 2px solid var(--indigo); border-radius: 30px 26px 32px 24px; box-shadow: 0 20px 40px rgba(29,20,96,.15); }
.staff-mode .menu .to-staff { background: transparent; color: var(--indigo); border: 2px solid var(--indigo); border-radius: 46% 54% 50% 50% / 60% 45% 55% 40%; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; font-size: .92rem; }
.staff-mode .menu .to-staff:hover { background: var(--indigo); color: #fff; }
/* libreria */
.shelf-card { background: rgba(255,255,255,.45); border: 2px solid rgba(29,20,96,.12); }
.lib-top h2 { font-weight: 900; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.03em; color: var(--indigo); }
.lib-top .chip { background: var(--indigo); border-radius: 46% 54% 50% 50% / 60% 45% 55% 40%; padding: 6px 14px; }
.plank { background: linear-gradient(180deg, #fbf3d2 0%, #c3b5ef 50%, #e0c977 100%); box-shadow: 0 16px 22px -10px rgba(29,20,96,.35), inset 0 1px 0 #fffbe9; }
.tome .bt { font-weight: 800; font-size: 1.05rem; }
.tome.ghost .cover { border-color: rgba(29,20,96,.3); color: #5a5a5a; }
.tome.ghost .cover b { color: rgba(29,20,96,.4); font-family: var(--serif); }
/* area staff */
.dash-head h1 { font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: -.025em; }
.light .pane-head h1 { font-weight: 800; letter-spacing: -.02em; }
.big { font-weight: 700; letter-spacing: -.02em; }
.login h1 { font-weight: 900; text-transform: none; letter-spacing: -.03em; }
.light .solid, .light .login .solid { border-radius: 46% 54% 50% 50% / 60% 45% 55% 40%; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.light .ghost:not(.tome) { border: 2px solid var(--indigo); color: var(--indigo); border-radius: 46% 54% 50% 50% / 60% 45% 55% 40%; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; font-size: .85rem; }
.c-sky .b-base { background: linear-gradient(180deg, #555555, #1d1460); }
.chip.dark { border-radius: 999px; }
.recap-body h2 { font-weight: 900; text-transform: none; letter-spacing: -.03em; color: var(--indigo); }
.staff-mode .recap .recap-head { background: radial-gradient(60% 90% at 50% 100%, rgba(200,240,60,.8), transparent 70%), linear-gradient(180deg, #ecebe7, #ffffff); }
/* ===== Home: solo libreria, impaginata come il manifesto "What is Recycling?" ===== */
body.staff-mode { background: radial-gradient(70% 80% at 0% 0%, #ffffff, transparent 60%), radial-gradient(70% 90% at 100% 60%, #e9e8e3, transparent 65%), #f3effd; }
body.staff-mode::after { opacity: .32; }
html { background: #f3effd; }
body.staff-mode { min-height: 100vh; background-attachment: fixed; }
.light .home { padding-block: 130px 90px; gap: 10px; }
.shelf-card { background: none; border: 0; box-shadow: none; padding: 0; gap: 30px; }
.lib-top { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.lib-top .eyebrow { color: var(--indigo); font-weight: 700; letter-spacing: .2em; font-size: .8rem; }
.lib-top h2 { font-size: clamp(3rem, 10.5vw, 7.4rem); font-weight: 900; line-height: .9; letter-spacing: -.035em; max-width: 11ch; margin: 0; color: var(--indigo); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; text-shadow: 0 1px 0 rgba(29,20,96,.15); }
.lib-top p { color: #5a5a5a; font-size: clamp(1rem, 2.2vw, 1.2rem); max-width: 40ch; margin: 0; }
.lib-top .chip { background: transparent; color: var(--indigo); border: 2px solid var(--indigo); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; padding: 6px 16px; }
.shelves { background: rgba(255,255,255,.28); border-radius: 36px; padding: 30px clamp(14px, 3vw, 30px) 34px; border: 2px solid rgba(29,20,96,.1); }
.deco { top: 150px; }
@media (max-width: 560px) { .light .home { padding-block: 120px 60px; } .shelf-card { gap: 34px; } }
/* ===== Oggetto giallo sullo sfondo (libro aperto) e frecce bianche ===== */
.hero-obj { position: relative; z-index: 0; display: block; width: min(500px, 92vw); margin: -70px auto -20px; pointer-events: none; filter: drop-shadow(0 30px 40px rgba(29,20,96,.18)); animation: float 7s ease-in-out infinite alternate; }
@keyframes float { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-12px) rotate(1.5deg); } }
.lib-sub { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; gap: 12px; margin-top: -10px; }
.lib-sub p { color: #5a5a5a; font-size: clamp(1rem, 2.2vw, 1.2rem); max-width: 40ch; margin: 0; }
.lib-sub .chip { background: transparent; color: var(--indigo); border: 2px solid var(--indigo); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; padding: 6px 16px; border-radius: 46% 54% 50% 50% / 60% 45% 55% 40%; }
.shelf-card { position: relative; z-index: 1; }
.lib-top { position: relative; z-index: 2; }
.shelves { position: relative; z-index: 1; margin-top: 0; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.light .hint svg { stroke: #fff; opacity: 1; stroke-width: 3.2; filter: drop-shadow(0 0 6px rgba(255,255,255,.9)) drop-shadow(0 2px 6px rgba(29,20,96,.25)); }
.deco { stroke: #fffaf0; filter: blur(1px) drop-shadow(0 0 12px rgba(255,255,255,.95)); }
@media (max-width: 560px) { .hero-obj { margin: -40px auto -14px; } }
/* ================= Home = una vera biblioteca ================= */
.light .home { grid-template-columns: minmax(0, 1fr); }
.biblio { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; width: 100%; max-width: 1060px; margin: 0 auto; min-width: 0; }
.bookcase, .case-inner, .case-inner .shelf { min-width: 0; }
.case-inner { overflow: hidden; }
.case-inner .row { overflow: visible; min-width: 0; }
.lamps { position: absolute; top: -66px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 12%; pointer-events: none; }
.lamp { position: relative; width: 70px; height: 150px; }
.lamp::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 104px; background: rgba(29,20,96,.5); }
.lamp::after { content: ""; position: absolute; left: 0; top: 100px; width: 70px; height: 34px; background: linear-gradient(180deg, #f6e4a6, #e5c25e); border-radius: 40px 40px 6px 6px; box-shadow: 0 30px 50px 18px rgba(255,236,170,.65), inset 0 -4px 0 rgba(160,110,20,.2); }
.sign { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; gap: 2px; padding: 16px 40px 18px; margin-bottom: -14px; background: linear-gradient(180deg, #222222, #1d1460); color: #c3b5ef; border-radius: 16px; box-shadow: 0 16px 30px -10px rgba(29,20,96,.55), inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 3px #e2c162, inset 0 0 0 5px #1d1460; }
.sign::before, .sign::after { content: ""; position: absolute; top: -40px; width: 2px; height: 40px; background: rgba(29,20,96,.45); }
.sign::before { left: 22%; } .sign::after { right: 22%; }
.sign-top { font-size: .72rem; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; opacity: .85; }
.sign h2 { font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 900; font-size: clamp(2.4rem, 7vw, 4.2rem); line-height: .95; letter-spacing: -.02em; color: #c3b5ef; margin: 2px 0; }
.sign-sub { font-size: .8rem; font-weight: 600; letter-spacing: .06em; opacity: .8; }
.bookcase { position: relative; z-index: 1; width: 100%; padding: 22px 20px 0; background: linear-gradient(90deg, #b9813d, #d9a65c 12%, #e2b36a 50%, #d9a65c 88%, #b9813d); border-radius: 16px 16px 6px 6px; box-shadow: 0 40px 70px -20px rgba(29,20,96,.45), inset 0 2px 0 rgba(255,255,255,.35); }
.bookcase::before { content: ""; position: absolute; left: -14px; right: -14px; top: -8px; height: 22px; background: linear-gradient(180deg, #e9bd73, #c48a40); border-radius: 10px; box-shadow: 0 6px 10px rgba(80,50,10,.25); }
.case-inner { position: relative; background: linear-gradient(180deg, #221d63, #2f2885 40%, #2a2478); border-radius: 6px 6px 0 0; box-shadow: inset 0 14px 30px rgba(0,0,0,.45), inset 10px 0 20px rgba(0,0,0,.25), inset -10px 0 20px rgba(0,0,0,.25); padding: 0 22px; display: grid; }
.case-inner .shelf { position: relative; margin: 0 -22px; padding: 26px 22px 0; }
.case-inner .row { display: flex; align-items: flex-end; gap: 26px; padding: 0; min-height: 0; }
.case-inner .deco-shelf .row { gap: 3px; }
.case-inner .plank { height: 20px; margin: 0 -22px; border-radius: 2px; background: linear-gradient(180deg, #f0c47a 0%, #dda75b 35%, #b77d36 100%); box-shadow: 0 10px 14px -4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4); }
.case-inner .plank::after { display: none; }
.shelf .tag { position: absolute; top: 8px; left: 22px; font-size: .62rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #1d1460; background: #c3b5ef; padding: 3px 10px; border-radius: 4px; box-shadow: 0 2px 0 rgba(0,0,0,.2); z-index: 2; }
.vetrina { padding-top: 40px !important; }
.vetrina .tome .cover { box-shadow: inset 7px 0 0 rgba(0,0,0,.16), 0 12px 20px -6px rgba(0,0,0,.6); }
.vetrina .tome::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: -4px; height: 8px; background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); z-index: -1; }
.case-inner .tome.ghost .cover { background: rgba(255,255,255,.06); border-color: rgba(246,231,173,.35); color: rgba(246,231,173,.7); }
.case-inner .tome.ghost .cover b { color: rgba(246,231,173,.5); }
.spine { flex: none; width: var(--w); height: var(--h); border-radius: 3px 3px 1px 1px; background: linear-gradient(to bottom, transparent 10%, var(--b) 10% 14%, transparent 14% 78%, var(--b) 78% 81%, transparent 81% 85%, var(--b) 85% 87%, transparent 87%), var(--c);
box-shadow: inset 2px 0 0 rgba(255,255,255,.22), inset -3px 0 0 rgba(0,0,0,.2), 0 0 0 .5px rgba(0,0,0,.2); transition: transform .4s var(--spring); }
.spine.lean { transform: rotate(7deg); transform-origin: bottom left; margin-right: 12px; }
.deco-shelf .spine:hover { transform: translateY(-6px); }
.deco-shelf .spine.lean:hover { transform: rotate(7deg) translateY(-6px); }
.gap { flex: none; width: 14px; }
.obj { flex: none; }
.plant { width: 56px; height: 84px; margin: 0 6px; }
.stack { display: grid; align-content: end; justify-items: center; width: 80px; height: 60px; gap: 2px; margin: 0 6px; }
.stack i { display: block; width: var(--w); height: 14px; background: var(--c); border-radius: 2px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.15); }
.bookend { width: 22px; height: 62px; background: linear-gradient(135deg, #c3b5ef, #d7b55a); clip-path: polygon(0 0, 30% 0, 100% 100%, 0 100%); margin: 0 3px; }
.floor { width: 110%; height: 26px; margin-top: -2px; background: radial-gradient(closest-side, rgba(29,20,96,.28), transparent); }
.biblio-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; color: #5a5a5a; text-align: center; margin-top: 14px; font-size: 1rem; }
.biblio-note .chip { background: transparent; color: var(--indigo); border: 2px solid var(--indigo); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; padding: 5px 14px; border-radius: 46% 54% 50% 50% / 60% 45% 55% 40%; }
.light .home { padding-block: 170px 70px; }
@media (max-width: 560px) {
.light .home { padding-block: 150px 50px; }
.lamps { display: none; }
.sign { padding: 12px 22px 14px; }
.bookcase { padding: 14px 10px 0; } .bookcase::before { left: -6px; right: -6px; }
.case-inner { padding: 0 10px; } .case-inner .shelf { margin: 0 -10px; padding: 20px 10px 0; } .case-inner .plank { margin: 0 -10px; height: 16px; }
.case-inner .row { gap: 12px; } .vetrina { padding-top: 34px !important; }
.plant { width: 42px; height: 64px; } .stack { width: 58px; } .bookend { height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .lamp::after { box-shadow: 0 30px 50px 18px rgba(255,236,170,.5); } }
/* ================= Biblioteca: rifinitura ================= */
.light .home { padding-block: 120px 70px; }
.room { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.prop { position: absolute; bottom: 0; pointer-events: none; z-index: 2; }
.tallplant { left: -118px; width: 120px; filter: drop-shadow(0 18px 18px rgba(29,20,96,.25)); transform-origin: bottom center; animation: breeze 6s ease-in-out infinite alternate; }
@keyframes breeze { to { transform: rotate(1.8deg); } }
.ladder { right: -76px; height: 88%; transform: rotate(4deg); transform-origin: bottom right; filter: drop-shadow(-8px 14px 12px rgba(29,20,96,.3)); }
@media (max-width: 1300px) { .ladder { display: none; } }
@media (max-width: 1260px) { .tallplant { left: -70px; width: 96px; } }
@media (max-width: 900px) { .prop { display: none; } }
/* legno con venature, cornice, zoccolo */
.bookcase { padding: 18px 22px 0; border-radius: 10px 10px 4px 4px;
background:
repeating-linear-gradient(90deg, rgba(120,70,20,.07) 0 1px, transparent 1px 7px, rgba(255,240,200,.06) 7px 8px, transparent 8px 15px),
linear-gradient(90deg, #a96f2e, #d29c52 9%, #deac63 50%, #d29c52 91%, #a96f2e);
box-shadow: 0 50px 80px -30px rgba(29,20,96,.55), inset 0 2px 0 rgba(255,255,255,.3), inset 3px 0 0 rgba(255,255,255,.15), inset -3px 0 0 rgba(0,0,0,.15); }
.bookcase::before { display: none; }
.crown { position: absolute; left: -16px; right: -16px; top: -14px; height: 26px; border-radius: 6px; background: repeating-linear-gradient(90deg, rgba(120,70,20,.08) 0 1px, transparent 1px 9px), linear-gradient(180deg, #f0c47a, #d6a056 55%, #a86f2f); box-shadow: 0 8px 12px -4px rgba(80,50,10,.45), inset 0 2px 0 rgba(255,255,255,.4); }
.crown::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -6px; height: 6px; background: #b97f38; border-radius: 0 0 4px 4px; }
.plinth { display: block; height: 30px; margin: 0 -22px; border-radius: 0 0 4px 4px; background: repeating-linear-gradient(90deg, rgba(120,70,20,.08) 0 1px, transparent 1px 9px), linear-gradient(180deg, #c48a40, #a26a2b); box-shadow: inset 0 3px 0 rgba(0,0,0,.18); }
.case-inner { border-radius: 3px; background: radial-gradient(70% 45% at 50% 0%, rgba(255,226,150,.22), transparent 70%), repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 22px), linear-gradient(180deg, #1d1857, #2b247d 40%, #0a0a0a); }
.case-inner .plank { height: 18px; background: repeating-linear-gradient(90deg, rgba(120,70,20,.08) 0 1px, transparent 1px 8px), linear-gradient(180deg, #f4cc85 0%, #dda75b 30%, #b97f38 100%); box-shadow: 0 12px 16px -6px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.18); }
.case-inner .shelf { padding-top: 22px; }
.case-inner .shelf::before { content: ""; position: absolute; left: 0; right: 0; bottom: 18px; height: 40px; background: linear-gradient(0deg, rgba(0,0,0,.28), transparent); pointer-events: none; }
/* dorsi più ricchi */
.spine { position: relative; box-shadow: inset 2px 0 0 rgba(255,255,255,.25), inset -4px 0 0 rgba(0,0,0,.22), 5px 0 10px -4px rgba(0,0,0,.55); }
.spine::before { content: ""; position: absolute; left: 50%; top: 24%; width: 3px; height: 42%; transform: translateX(-50%); background: repeating-linear-gradient(180deg, var(--t) 0 5px, transparent 5px 8px); border-radius: 2px; }
.spine.hard { border-radius: 5px 5px 2px 2px; }
.spine.hard::before { width: 42%; height: 3px; top: 30%; background: var(--t); box-shadow: 0 6px 0 var(--t), 0 12px 0 var(--t); }
.spine.emb::after { content: ""; position: absolute; left: 50%; bottom: 24%; width: 7px; height: 7px; transform: translateX(-50%) rotate(45deg); background: var(--b); box-shadow: 0 0 0 1.5px var(--t); }
/* vetrina: libri su leggio con numero di catalogo */
.vetrina .row { gap: 30px; }
.vetrina .tome { margin-bottom: 0; }
.vetrina .tome .cover { transform: perspective(900px) rotateX(4deg); transform-origin: bottom center; }
.vetrina .tome:hover .cover, .vetrina .tome:focus-visible .cover { transform: perspective(900px) translateY(-10px) rotateY(-22deg); }
.card-no { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%) rotate(-2deg); background: #fff8e2; color: #1d1460; font-size: .62rem; font-weight: 800; letter-spacing: .14em; padding: 3px 8px; border-radius: 3px; box-shadow: 0 3px 6px rgba(0,0,0,.35); white-space: nowrap; z-index: 3; font-variant-numeric: tabular-nums; }
.shelf .tag { top: 6px; background: linear-gradient(180deg, #fbefc4, #f0d98d); color: #1d1460; border-radius: 3px; box-shadow: 0 2px 0 rgba(0,0,0,.25), inset 0 0 0 1px rgba(160,110,20,.3); }
/* insegna in ottone */
.sign { padding: 18px 46px 20px; background: linear-gradient(180deg, #222222, #1d1460); box-shadow: 0 18px 30px -12px rgba(29,20,96,.6), inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 3px #e7c56a, inset 0 0 0 4px #b98d33, inset 0 0 0 7px #1d1460; border-radius: 12px; }
.sign h2 { background: linear-gradient(180deg, #fff3c4 20%, #e8c464 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.screw { position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2c0, #c9a043 60%, #8a6420); box-shadow: 0 1px 1px rgba(0,0,0,.4); }
.screw:first-of-type { left: 16px; } .screw:nth-of-type(2) { right: 16px; }
.screw::after { content: ""; position: absolute; left: 1px; right: 1px; top: 4px; height: 1px; background: rgba(90,60,10,.6); transform: rotate(35deg); }
/* tappeto e pavimento */
.rug { width: min(780px, 92%); height: 46px; margin-top: -12px; border-radius: 50%; background: radial-gradient(closest-side, #222222 0 62%, #c3b5ef 63% 68%, #222222 69% 86%, transparent 87%); opacity: .9; transform: perspective(300px) rotateX(55deg); box-shadow: 0 10px 20px rgba(29,20,96,.2); }
.biblio-note { margin-top: 18px; }
.lamps { top: -74px; padding: 0 18%; }
@media (max-width: 560px) {
.light .home { padding-block: 96px 50px; }
.bookcase { padding: 12px 10px 0; } .crown { left: -6px; right: -6px; } .plinth { margin: 0 -10px; height: 20px; }
.vetrina .row { gap: 14px; } .card-no { font-size: .55rem; bottom: -20px; }
.sign { padding: 14px 30px 16px; }
}
/* ================= Libreria in stile manifesto (come "What is Recycling?") ================= */
.poster { position: relative; display: grid; justify-items: center; gap: 34px; width: 100%; max-width: 1080px; margin: 0 auto; }
.light .home { padding-block: 70px 70px; }
.poster-head { display: grid; justify-items: center; text-align: center; gap: 14px; position: relative; z-index: 1; }
.poster-head .eyebrow { color: var(--indigo); font-weight: 700; letter-spacing: .22em; font-size: .78rem; }
.poster-head h2 { font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; font-weight: 900; font-size: clamp(3.2rem, 11vw, 8rem); line-height: .88; letter-spacing: -.035em; color: var(--indigo); margin: 0; }
.poster-head p { color: #5a5a5a; font-size: clamp(1rem, 2.2vw, 1.2rem); max-width: 40ch; margin: 0; }
.poster .deco { top: 40px; }
.poster .count { background: transparent; color: var(--indigo); border: 2px solid var(--indigo); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; padding: 7px 18px; border-radius: 46% 54% 50% 50% / 60% 45% 55% 40%; }
.flat-shelves { width: 100%; display: grid; gap: 40px; min-width: 0; }
.fshelf { min-width: 0; }
.frow { display: flex; align-items: flex-end; justify-content: center; gap: 22px; padding: 0 12px; min-width: 0; }
.fplank { height: 14px; border-radius: 10px; background: #c3b5ef; box-shadow: inset 0 -4px 0 #f07a3a, 0 14px 24px -12px rgba(29,20,96,.35); }
.frow .tome { width: 136px; height: 196px; }
.frow .tome .cover { border-radius: 6px; box-shadow: inset 6px 0 0 rgba(0,0,0,.14), 0 10px 20px -10px rgba(29,20,96,.6); }
.frow .tome::after { display: none; }
.frow .tome .bt { font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 800; font-size: 1.15rem; line-height: 1; }
.frow .tome .ba { font-weight: 700; letter-spacing: .14em; }
.pumpkin-ba { color: #c3b5ef !important; }
.frow .tome.ghost .cover { background: transparent; border: 2px dashed rgba(29,20,96,.45); color: var(--indigo); border-radius: 6px; }
.frow .tome.ghost .cover b { color: var(--indigo); font-family: var(--serif); font-size: 2.2rem; }
.fspine { flex: none; width: var(--w); height: var(--h); background: var(--c); border-radius: 4px 4px 2px 2px; position: relative; margin-left: -18px; box-shadow: inset -3px 0 0 rgba(0,0,0,.08); }
.fspine + .fspine { margin-left: -19px; }
.frow .tome + .fspine, .frow .ghost + .fspine { margin-left: 0; }
.fspine::before { content: ""; position: absolute; left: 50%; top: 18%; width: 3px; height: 34%; transform: translateX(-50%); background: repeating-linear-gradient(180deg, var(--t) 0 5px, transparent 5px 9px); opacity: .8; border-radius: 2px; }
.fspine::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 12%; height: 3px; background: var(--t); opacity: .7; border-radius: 2px; }
.fspine.lean { transform: rotate(6deg); transform-origin: bottom left; margin-right: 8px; }
.frow { gap: 22px; }
.frow > .fspine { margin-left: 0; }
.frow > .fspine ~ .fspine { margin-left: -19px; }
@media (max-width: 560px) {
.light .home { padding-block: 60px 50px; }
.frow { gap: 14px; padding: 0 4px; } .frow .tome { width: 104px; height: 150px; } .frow .tome .bt { font-size: .92rem; } .frow .tome .ba { font-size: .5rem; }
.fspine { --h: 120px; }
}
/* racconto della Festa d'autunno nei colori del sito */
.staff-mode .recap .recap-head { background: #1d1460; }
.recap .recap-head svg { filter: drop-shadow(0 18px 30px rgba(200,240,60,.35)); }
/* ===== Mensole etichettate, libri "prossimamente" ===== */
.fshelf { position: relative; display: grid; gap: 0; }
.shelf-label { margin-bottom: 30px; }
.shelf-label { justify-self: center; font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--indigo); }
.tome .ribbon { position: absolute; top: -24px; right: 10px; z-index: 3; background: #ffffff; color: #1d1460; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 6px 6px 10px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); box-shadow: 0 2px 0 rgba(29,20,96,.2); }
.tome.soon .cover { box-shadow: inset 6px 0 0 rgba(0,0,0,.12), 0 10px 20px -10px rgba(29,20,96,.6); }
.p-pumpkin svg { overflow: visible; }
/* ================= Font e contrasti come "What is Recycling?" ================= */
:root { --serif: "Caprasimo", "Cooper Black", Georgia, serif; --ring: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M52%203.2%20C%2079%202.4%2097.5%209.5%2097%2020.6%20C%2096.4%2032.4%2075%2038.2%2048.6%2037.4%20C%2021.5%2036.8%202.8%2030.6%203.1%2019.4%20C%203.4%208.6%2024.5%202.6%2055%204.4%22%20fill%3D%22none%22%20stroke%3D%22%233730a8%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20vector-effect%3D%22non-scaling-stroke%22/%3E%3C/svg%3E"); --ring-w: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M52%203.2%20C%2079%202.4%2097.5%209.5%2097%2020.6%20C%2096.4%2032.4%2075%2038.2%2048.6%2037.4%20C%2021.5%2036.8%202.8%2030.6%203.1%2019.4%20C%203.4%208.6%2024.5%202.6%2055%204.4%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20vector-effect%3D%22non-scaling-stroke%22/%3E%3C/svg%3E"); --sun: #f5d453; --sun-d: #e3b62f; }
.poster-head h2, .dash-head h1, .light .pane-head h1, .login h1, .recap-body h2, .big, .next-pill b, .tome .bt, .book .bt, .staff-mode .logo, .hint span b, .sign h2, .tome.ghost .cover b, .frow .tome .bt, .frow .tome.ghost .cover b, .lib-top h2, .hello h1 {
font-family: var(--serif) !important; font-weight: 400 !important; font-synthesis: none; font-variation-settings: normal !important; }
.poster-head h2 { font-size: clamp(3.4rem, 11.5vw, 8.4rem); line-height: .9; letter-spacing: -.01em; color: #1d1460; text-shadow: none; }
.poster-head .eyebrow, .poster-head p { font-family: "Archivo", sans-serif; }
.poster-head .eyebrow { font-weight: 600; letter-spacing: .14em; font-size: .82rem; }
.poster-head p { color: #1d1460; font-weight: 500; opacity: .85; }
.staff-mode .logo { font-size: 1.45rem; letter-spacing: 0; }
.dash-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: 0; }
.light .pane-head h1 { letter-spacing: 0; }
.big { letter-spacing: 0; }
/* cerchietti disegnati a mano attorno alle scritte */
.ring, .burger, .staff-mode .menu .to-staff, .poster .count { background: var(--ring) center / 100% 100% no-repeat !important; border: 0 !important; border-radius: 0 !important; }
.burger { width: 68px; height: 46px; gap: 6px; }
.staff-mode .burger span { width: 22px; height: 2.5px; }
.staff-mode .menu { background: rgba(240,235,252,.97); border: 0; border-radius: 22px; box-shadow: 0 20px 50px rgba(29,20,96,.18); padding: 10px; }
.staff-mode .menu .to-staff { color: #1d1460; text-transform: uppercase; font-weight: 600; letter-spacing: .06em; padding: 14px 24px; font-family: "Archivo", sans-serif; }
.staff-mode .menu .to-staff:hover { background: var(--ring) center / 100% 100% no-repeat, rgba(29,20,96,.08) !important; color: #1d1460; border-radius: 999px !important; }
.poster .count { padding: 10px 22px; font-family: "Archivo", sans-serif; font-weight: 600; color: #1d1460; }
/* logo con pallino giallo */
.staff-mode .logo i { background: var(--sun) !important; box-shadow: 0 0 0 2px #1d1460; width: 13px; height: 13px; }
.poster-head h2 { font-size: clamp(3rem, 9vw, 6.6rem); }
/* il mobile giallo: l'elemento a contrasto, come il bidone */
.cabinet { position: relative; width: min(1000px, 100%); margin-top: 10px; padding: 46px clamp(14px, 3vw, 34px) 120px; border-radius: 30px 30px 18px 18px;
background: radial-gradient(120% 70% at 30% 0%, rgba(255,250,220,.75), transparent 55%), linear-gradient(180deg, #f8de6c 0%, #f2cf48 55%, #e3b52c 100%);
box-shadow: inset 0 -18px 30px rgba(170,110,0,.25), inset 0 3px 0 rgba(255,255,255,.6), 0 40px 70px -24px rgba(29,20,96,.55); transform: rotate(-1.2deg); }
.lid { position: absolute; left: -18px; right: -18px; top: -22px; height: 40px; border-radius: 16px; background: linear-gradient(180deg, #fbe79a, #efc843 70%, #d9a826); box-shadow: 0 10px 18px -6px rgba(140,90,0,.45), inset 0 2px 0 rgba(255,255,255,.7); }
.lid::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -10px; height: 12px; background: repeating-linear-gradient(90deg, #d9a826 0 26px, transparent 26px 70px); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: .9; }
.scribble { position: absolute; left: 4%; right: 4%; bottom: 18px; width: 92%; height: 90px; opacity: .92; }
.cabinet .flat-shelves { position: relative; z-index: 1; }
.cabinet .fplank { background: #d8a62a; box-shadow: inset 0 -4px 0 #c08f1a, 0 12px 18px -10px rgba(120,70,0,.55); }
.cabinet .tome .cover { box-shadow: inset 6px 0 0 rgba(0,0,0,.16), 0 14px 22px -8px rgba(110,60,0,.55); }
.cabinet .frow .tome.ghost .cover { border-color: rgba(29,20,96,.55); background: rgba(255,255,255,.25); }
.cabinet .fspine { box-shadow: inset -3px 0 0 rgba(0,0,0,.1), 4px 0 8px -4px rgba(110,60,0,.4); }
.poster { gap: 40px; }
.poster .deco { stroke: #fff9e6; }
@media (max-width: 560px) { .cabinet { padding: 36px 10px 90px; transform: rotate(-.8deg); } .lid { left: -8px; right: -8px; } .scribble { height: 64px; } }
/* meno giallo: mobile più compatto e tinte più tenui */
.cabinet { width: min(860px, 100%); padding: 40px clamp(14px, 3vw, 30px) 56px; background: radial-gradient(120% 70% at 30% 0%, rgba(255,252,235,.8), transparent 55%), linear-gradient(180deg, #e4dcfb 0%, #c3b5ef 60%, #a593e6 100%); box-shadow: inset 0 -12px 22px rgba(170,110,0,.16), inset 0 3px 0 rgba(255,255,255,.6), 0 34px 60px -26px rgba(29,20,96,.5); }
.lid { background: linear-gradient(180deg, #fcefbd, #f3d97a 70%, #a593e6); height: 34px; top: -18px; }
.lid::after { background: repeating-linear-gradient(90deg, #a593e6 0 22px, transparent 22px 64px); height: 9px; bottom: -8px; }
.scribble { height: 44px; bottom: 10px; opacity: .8; }
.cabinet .fplank { background: #a593e6; box-shadow: inset 0 -4px 0 #8a76dd, 0 10px 16px -10px rgba(120,70,0,.45); }
@media (max-width: 560px) { .cabinet { padding: 32px 10px 46px; } .scribble { height: 34px; } }
/* ================= Stile unico per tutto il sito + più movimento ================= */
.logo .be { font: inherit; color: inherit; }
.logo { gap: 0 !important; align-items: baseline; }
.staff-mode .logo i { background: #1d1460 !important; box-shadow: none !important; width: 12px; height: 12px; }
/* titoli che salgono parola per parola e si muovono al passaggio */
.word { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .06em .02em .12em; margin: -.06em -.02em -.12em; }
.word > span { display: inline-block; animation: word-up 1s var(--ease) both; animation-delay: var(--d, 0s); transition: transform .4s var(--spring); }
@keyframes word-up { from { transform: translateY(110%) rotate(6deg); } }
.poster-head h2:hover .word > span { animation: none; }
.poster-head h2 .word:hover > span { transform: translateY(-6px) rotate(-3deg); }
.poster-head p { animation: reveal .9s var(--ease) .5s both; }
/* parallasse */
.poster { --mx: 0; --my: 0; }
.poster .deco-l { translate: calc(var(--mx) * -26px) calc(var(--my) * -18px); }
.poster .deco-r { translate: calc(var(--mx) * 26px) calc(var(--my) * 18px); }
.cabinet { translate: calc(var(--mx) * 12px) calc(var(--my) * 8px); transition: translate .6s var(--ease); animation: cab-in 1.1s var(--ease) .35s both; }
@keyframes cab-in { from { opacity: 0; transform: translateY(60px) rotate(2deg); } }
.cabinet .tome:hover .cover { animation: wiggle .5s var(--ease); }
@keyframes wiggle { 30% { rotate: -3deg; } 60% { rotate: 2deg; } }
/* nastro che scorre */
.ticker { width: calc(100% + 80px); margin: 6px -40px 0; overflow: hidden; background: #1d1460; color: #c3b5ef; rotate: -2deg; padding: 12px 0; box-shadow: 0 18px 30px -16px rgba(29,20,96,.6); }
.ticker-track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.ticker-track span { font-family: var(--serif); font-size: clamp(1.2rem, 2.6vw, 1.7rem); white-space: nowrap; padding-right: .4em; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 560px) { .ticker { width: calc(100% + 40px); margin: 0 -20px; } }
/* --- area staff, login, finestre: stesso linguaggio della home --- */
.light .login { background: rgba(255,255,255,.55); border: 2px solid rgba(29,20,96,.12); border-radius: 30px; box-shadow: 0 30px 60px -30px rgba(29,20,96,.4); backdrop-filter: blur(8px); }
.light .login h1 { font-size: clamp(2.4rem, 7vw, 3.4rem); color: #1d1460; line-height: .95; }
.light .login h1 em { color: inherit; background: linear-gradient(transparent 62%, #c3b5ef 62%); }
.light .login .eyebrow, .light .login p, .light .login .field { color: #4a4a4a; }
.light .login .ghost:not(.tome) { background: var(--ring) center / 100% 100% no-repeat !important; border: 0 !important; border-radius: 0 !important; padding: 12px 18px; }
.dash { background: rgba(255,255,255,.3); border: 2px solid rgba(29,20,96,.1); border-radius: 34px; box-shadow: 0 40px 80px -40px rgba(29,20,96,.45); }
.side-logo { background: #1d1460; border-radius: 16px; }
.light .pill-nav .ink { background: var(--ring) center / 100% 100% no-repeat, rgba(200,240,60,.6) !important; border-radius: 22px; }
.light .pill-nav button[aria-selected="true"] { color: #1d1460 !important; }
.light .pill-nav button { color: #6b6b6b; font-weight: 600; }
.light .pill-nav button:hover { color: #1d1460; background: rgba(29,20,96,.05); }
.side-out { color: #6b6b6b; }
.dash-head h1 { color: #1d1460; }
.dash-head .ghost:not(.tome), .light .cal-nav .ghost:not(.tome) { background: var(--ring) center / 100% 100% no-repeat !important; border: 0 !important; border-radius: 0 !important; padding: 12px 22px; }
.light .card { background: rgba(255,255,255,.55); border: 2px solid rgba(29,20,96,.08); border-radius: 26px; transition: transform .45s var(--spring), box-shadow .4s var(--ease); }
.light .card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 24px 40px -24px rgba(29,20,96,.45); }
.light .c-lav { background: linear-gradient(180deg, #eef6fb, #e4dcfb); }
.light .c-sky { background: linear-gradient(180deg, #e4dcfb, #c3b5ef); }
.light .c-rose { background: linear-gradient(180deg, #ffffff, #f2eefc); }
.ov-cards > *, .ov-side, .ov-pipe { animation: reveal .8s var(--ease) both; }
.ov-cards > :nth-child(2) { animation-delay: .08s; } .ov-cards > :nth-child(3) { animation-delay: .16s; } .ov-side { animation-delay: .22s; } .ov-pipe { animation-delay: .3s; }
.card-head h2, .card-head h3 { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: #1d1460; }
.chip { font-family: "Archivo", sans-serif; }
.chip.dark { background: #1d1460; }
.cell.lav { background: #e3f1fa; } .cell.sky { background: #f8eac0; } .cell.rose { background: #ffffff; }
.light .day { border: 2px solid rgba(29,20,96,.06); border-radius: 18px; transition: transform .35s var(--spring), border-color .2s; }
.light .day:hover { transform: translateY(-3px) rotate(-.6deg); border-color: rgba(29,20,96,.2); }
.light .day.today .n { background: #c3b5ef; color: #1d1460; box-shadow: 0 0 0 2px #1d1460; }
.light .ev { background: #1d1460 !important; color: #c3b5ef !important; border-radius: 10px; }
.light .round { border: 2px solid rgba(29,20,96,.15); color: #1d1460; transition: transform .35s var(--spring); }
.light .round:hover { transform: rotate(-8deg) scale(1.06); }
.light .item { border: 2px solid rgba(29,20,96,.06); border-radius: 20px; transition: transform .35s var(--spring); }
.light .item:hover { transform: translateX(4px); }
.light .add { border: 2px solid rgba(29,20,96,.08); border-radius: 24px; }
/* librerie dello staff e dell'archivio come il mobile giallo della home */
.light .library { border: 0; border-radius: 28px 28px 16px 16px; padding-top: 34px;
background: linear-gradient(to bottom, transparent 0 calc(34px + var(--bh)), #a593e6 calc(34px + var(--bh)), #8a76dd calc(46px + var(--bh)), rgba(140,90,0,.18) calc(46px + var(--bh)), transparent calc(56px + var(--bh))) 0 8px / 100% calc(var(--bh) + var(--gap-y)) repeat-y,
radial-gradient(120% 70% at 30% 0%, rgba(255,252,235,.8), transparent 55%), linear-gradient(180deg, #e4dcfb 0%, #c3b5ef 60%, #a593e6 100%) !important;
box-shadow: inset 0 -12px 22px rgba(170,110,0,.16), inset 0 3px 0 rgba(255,255,255,.6), 0 34px 60px -26px rgba(29,20,96,.5); }
.light .library .book.new { background: rgba(255,255,255,.35); border-color: rgba(29,20,96,.4); color: #1d1460; }
.light .library .book.live::after { background: #1d1460; color: #c3b5ef; }
/* finestre */
.staff-mode .sheet-card { background: #ffffff; border: 2px solid rgba(29,20,96,.12); border-radius: 30px; animation: card-up .6s var(--ease) both; }
.staff-mode .sheet .round { border: 0; background: var(--ring) center / 100% 100% no-repeat; }
.recap-body h2 { color: #1d1460; }
.staff-mode .edit .solid, .light .solid { background: #1d1460; color: #fff; }
/* ===================================================================
STILE "LOOP": grigio caldo, nero, lime, arancio, azzurro, salvia.
Inter Tight per tutto, Caveat per le note scritte a mano.
=================================================================== */
:root { --ink: #1d1460; --paper: #f3effd; --card-w: #ffffff; --lime: #c3b5ef; --orange: #f58a4b; --sky: #c3b5ef; --sage: #a593e6; --serif: "Inter Tight", system-ui, sans-serif; --font: "Inter Tight", system-ui, -apple-system, sans-serif; --hand: "Caveat", "Comic Sans MS", cursive; }
html, body.staff-mode { background: var(--paper) !important; color: var(--ink) !important; font-family: var(--font); }
body.staff-mode::after { display: none !important; }
html body :is(.poster-head h2, .dash-head h1, .light .pane-head h1, .login h1, .recap-body h2, .big, .next-pill b, .tome .bt, .book .bt, .staff-mode .logo, .sign h2, .frow .tome .bt, .lib-top h2, .hello h1, .card-head h2, .card-head h3) {
font-family: "Inter Tight", system-ui, sans-serif !important; font-weight: 600 !important; letter-spacing: -.035em !important; }
.light { font-family: var(--font) !important; }
.script { font-family: var(--hand); font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 700; color: var(--ink); line-height: 1; display: inline-block; transform: rotate(-2deg); }
/* testata: barra flottante con pillola nera */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; }
.top .wrap { max-width: 1180px; margin-top: 10px; padding-block: 8px; padding-inline: 18px 8px !important; background: rgba(250,250,247,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(29,20,96,.08); border-radius: 999px; width: calc(100% - 24px); }
.staff-mode .top .wrap { max-width: 1180px; }
.staff-mode .logo { font-size: 1.35rem !important; color: var(--ink) !important; letter-spacing: -.05em !important; font-weight: 700 !important; }
.burger, html body .burger { background: var(--ink) !important; border-radius: 999px !important; width: auto; height: 44px; padding: 0 18px 0 14px; display: inline-flex; flex-direction: row; align-items: center; gap: 10px; color: #fff; font: 600 .95rem var(--font); }
.burger::after { content: "Menu"; }
.staff-mode .burger span { display: none; }
.burger::before { content: "↗"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--ink); font-size: .95rem; }
.burger[aria-expanded="true"]::before { content: "✕"; font-size: .75rem; }
.staff-mode .menu { top: 70px; background: var(--card-w) !important; border: 1px solid rgba(29,20,96,.08) !important; border-radius: 24px !important; box-shadow: 0 30px 60px -20px rgba(29,20,96,.25) !important; padding: 8px !important; width: 230px; }
html body .staff-mode .menu .to-staff, .staff-mode .menu .to-staff { background: var(--ink) !important; color: #fff !important; border-radius: 999px !important; padding: 14px 20px !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; text-align: left; display: flex !important; justify-content: space-between; }
.staff-mode .menu .to-staff span { display: inline !important; color: var(--lime) !important; }
.staff-mode .menu .to-staff:hover { background: #2a2a2a !important; }
/* ---------- HOME ---------- */
.light .home.lp { display: block; max-width: none; padding: 0; margin: 0; min-height: 0; }
.lp section { position: relative; }
.lp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; max-width: 1180px; margin: 0 auto; min-height: calc(100vh - 80px); padding: 40px max(20px, env(safe-area-inset-right, 0px)) 60px max(20px, env(safe-area-inset-left, 0px)); justify-items: stretch; }
.lp-intro { display: grid; gap: 18px; align-content: center; }
.lp-intro .poster-head { display: block; text-align: left; }
.lp-intro .poster-head h2 { font-size: clamp(2.8rem, 6.4vw, 5.6rem) !important; line-height: .95 !important; color: var(--ink) !important; text-align: left; max-width: 11ch; }
.lp-intro p { font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.4; max-width: 34ch; color: #3a3a3a; font-weight: 500; letter-spacing: -.01em; }
.shapes { --rot: 0deg; --spread: 1; position: relative; width: min(440px, 80vw); aspect-ratio: 1; justify-self: center; }
.shp { position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); display: grid; place-items: center;
transform: rotate(var(--rot)) translate(calc(var(--x) * var(--spread)), calc(var(--y) * var(--spread))) rotate(calc(var(--rot) * -1.6 + var(--r)));
transition: transform .25s linear; animation: pop .9s var(--spring) both; animation-delay: calc(var(--n) * 60ms); }
@keyframes pop { from { scale: 0; } }
.shp b { font-size: calc(var(--s) * .34); color: var(--ink); font-weight: 700; line-height: 1; }
.shp.c { border-radius: 50%; } .shp.sq { border-radius: 6px; }
.shp.lime { background: var(--lime); } .shp.orange { background: var(--orange); } .shp.sky { background: var(--sky); } .shp.sage { background: var(--sage); }
.shapes .core { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; background: var(--orange); display: grid; place-items: center; font: 700 2.6rem var(--font); letter-spacing: -.06em; color: var(--ink); transform: rotate(calc(var(--rot) * .5)); animation: pop 1s var(--spring) both; box-shadow: inset 0 -8px 0 rgba(0,0,0,.08); }
@media (max-width: 820px) {
.lp-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 30px; gap: 10px; }
.shapes { width: min(360px, 86vw); order: -1; }
.shapes .core { width: 104px; height: 104px; margin: -52px 0 0 -52px; font-size: 2rem; }
.shp { --s2: 1; }
}
/* sezione scura con chip che si radunano */
.lp-dark { padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)); --p: 0; }
.dark-inner { position: relative; max-width: 1180px; margin: 0 auto; min-height: 92vh; border-radius: 32px; overflow: hidden; background: radial-gradient(60% 50% at 50% 60%, #3a3530, transparent 70%), #121212; color: #ffffff; display: grid; place-items: center; padding: 60px 20px; }
.dark-inner h2 { position: relative; z-index: 2; font: 600 clamp(2.2rem, 6vw, 4.4rem)/1 var(--font); letter-spacing: -.04em; text-align: center; margin-top: calc(160px + 40px * (1 - var(--p))); }
.chips { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.chip-f { position: absolute; left: 50%; top: 40%; background: #ffffff; color: var(--ink); font-weight: 600; font-size: clamp(.82rem, 1.6vw, 1rem); padding: 9px 16px; border-radius: 999px; white-space: nowrap; box-shadow: 0 10px 20px -8px rgba(0,0,0,.6);
transform: translate(-50%, -50%) translate(calc(var(--fx) * 3 * (1 - var(--p)) + var(--tx) * var(--p)), calc(var(--fy) * (1 - var(--p)) + var(--ty) * var(--p))) rotate(calc(var(--fr) * (1 - var(--p))));
filter: blur(calc((1 - var(--p)) * 3px)); opacity: calc(.35 + var(--p) * .65); }
.chip-f:nth-child(3n+1) { background: var(--lime); } .chip-f:nth-child(4n+2) { background: var(--sky); }
@media (max-width: 560px) { .dark-inner { min-height: 80vh; border-radius: 24px; } }
/* sezione lime */
.lp-lime { margin: 0; background: var(--lime); padding: 110px max(20px, env(safe-area-inset-right, 0px)) 110px max(20px, env(safe-area-inset-left, 0px)); text-align: center; display: grid; justify-items: center; gap: 18px; }
.lp-lime h2 { font: 600 clamp(2.2rem, 6vw, 4.4rem)/1 var(--font); letter-spacing: -.045em; }
.lp-lime p { max-width: 46ch; font-size: clamp(1rem, 2vw, 1.2rem); font-weight: 500; }
/* numeri */
.lp-stats { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px)); }
.stat-b { padding: 56px 20px; border-left: 1px solid rgba(29,20,96,.12); display: grid; gap: 6px; }
.stat-b:first-child { border-left: 0; }
.stat-b b { font: 600 clamp(3rem, 8vw, 5.6rem)/1 var(--font); letter-spacing: -.05em; }
.stat-b b sup { font-size: .4em; vertical-align: top; }
.stat-b span { font-size: 1.15rem; font-weight: 500; color: #3a3a3a; max-width: 16ch; }
@media (max-width: 640px) { .lp-stats { grid-template-columns: 1fr; } .stat-b { border-left: 0; border-top: 1px solid rgba(29,20,96,.12); padding: 34px 4px; } .stat-b:first-child { border-top: 0; } }
/* puntate passate: carte */
.lp-lib { max-width: 1180px; margin: 0 auto; padding: 90px max(20px, env(safe-area-inset-right, 0px)) 40px max(20px, env(safe-area-inset-left, 0px)); display: grid; justify-items: center; text-align: center; gap: 14px; }
.lp-lib h2 { font: 600 clamp(2rem, 5vw, 3.6rem)/1 var(--font); letter-spacing: -.045em; max-width: 16ch; margin-bottom: 26px; }
.ep-cards { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; text-align: left; }
.ep-card { appearance: none; border: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; background: var(--card-w); border-radius: 24px; padding: 22px; display: grid; gap: 6px; align-content: start; min-height: 220px; transition: transform .45s var(--spring), box-shadow .3s; box-shadow: 0 1px 0 rgba(29,20,96,.05); }
.ep-card:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 30px 40px -24px rgba(29,20,96,.35); }
.ep-ico { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; overflow: hidden; margin-bottom: 14px; font: 700 1.6rem var(--font); }
.ep-ico svg { width: 82%; height: 82%; }
.ep-t { font-size: 1.35rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.ep-d { color: #6b6b6b; font-size: .92rem; }
.ep-go { margin-top: auto; padding-top: 18px; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
.ep-go i { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-style: normal; font-size: .8rem; transition: transform .35s var(--spring); }
.ep-card:hover .ep-go i { transform: rotate(45deg); }
html body .light .ep-card.ghost:not(.tome) { cursor: default; background: transparent !important; border: 1.5px dashed rgba(29,20,96,.25) !important; border-radius: 24px !important; padding: 22px !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ink) !important; display: grid; }
.ep-card.ghost:hover { transform: none; box-shadow: none; }
.ep-card.ghost .ep-ico { background: rgba(29,20,96,.06); }
/* invito finale */
.lp-cta { padding: 60px 20px 110px; display: grid; justify-items: center; gap: 18px; }
.pill-cta { display: inline-flex; align-items: center; gap: 12px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 600; font-size: 1.1rem; padding: 8px 26px 8px 8px; border-radius: 999px; transition: transform .35s var(--spring); }
.pill-cta i { width: 40px; height: 40px; border-radius: 50%; background: var(--lime); color: var(--ink); display: grid; place-items: center; font-style: normal; transition: transform .35s var(--spring); }
.pill-cta:hover { transform: scale(1.04); } .pill-cta:hover i { transform: rotate(45deg); }
/* entrate allo scroll (visibili anche se l'osservatore non scatta) */
.reveal { transition: transform 1s var(--ease), opacity 1s var(--ease); }
.reveal:not(.in) { transform: translateY(40px); opacity: .55; }
/* ---------- AREA STAFF, LOGIN, FINESTRE: stesso stile ---------- */
.light .login { background: var(--card-w) !important; border: 0 !important; border-radius: 28px !important; box-shadow: 0 30px 60px -30px rgba(29,20,96,.3) !important; backdrop-filter: none; }
.light .login h1 { font-size: clamp(2.4rem, 7vw, 3.4rem) !important; color: var(--ink) !important; }
.light .login h1 em { background: none !important; color: var(--ink); font-family: var(--hand); font-style: normal; font-weight: 700; font-size: 1.15em; }
.light .login .eyebrow { font-family: var(--hand); font-size: 1.5rem; letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 700; }
.light .login .field, .light .login p { color: #5a5a5a !important; }
.light .login .field input, .light .pass input { background: #f3effd !important; border: 0 !important; border-radius: 14px !important; color: var(--ink) !important; }
html body .light .solid, html body .light .login .solid, html body .staff-mode .edit .solid { background: var(--ink) !important; color: #fff !important; border-radius: 999px !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; }
html body .light .ghost:not(.tome), html body .dash-head .ghost:not(.tome), html body .light .login .ghost:not(.tome), html body .light .cal-nav .ghost:not(.tome) { background: transparent !important; border: 1.5px solid rgba(29,20,96,.2) !important; border-radius: 999px !important; color: var(--ink) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; padding: 10px 18px !important; }
.dash { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; padding: 0 !important; gap: 18px !important; }
.side { background: var(--card-w); border-radius: 26px; padding: 14px 8px !important; }
.side-logo { background: var(--orange) !important; border-radius: 50% !important; }
.side-logo i { border-color: var(--ink) !important; } .side-logo i::after { background: var(--ink) !important; }
html body .light .pill-nav .ink { background: var(--ink) !important; border-radius: 18px !important; }
html body .light .pill-nav button[aria-selected="true"] { color: #fff !important; }
.light .pill-nav button { color: #6b6b6b !important; }
.dash-head h1 { font-size: clamp(1.9rem, 4vw, 2.8rem) !important; }
.dash-head p { color: #6b6b6b !important; }
html body .light .card { background: var(--card-w) !important; border: 0 !important; border-radius: 24px !important; }
html body .light .c-lav { background: var(--sky) !important; } html body .light .c-sky { background: var(--lime) !important; } html body .light .c-rose { background: #e4dcfb !important; }
.b-base, .c-sky .b-base, .c-rose .b-base { background: var(--ink) !important; }
.c-lav .b-base { background: repeating-linear-gradient(-45deg, rgba(29,20,96,.55) 0 2px, transparent 2px 7px), rgba(255,255,255,.5) !important; }
.chip.dark { background: var(--ink) !important; }
.cell.lav { background: #dcecf6 !important; } .cell.sky { background: #e4dcfb !important; } .cell.rose { background: #fde0cd !important; } .cell.date { background: #f3effd !important; }
.pipe thead th { background: #f3effd !important; }
.avatar { background: var(--lime) !important; }
.light .day { background: var(--card-w) !important; border: 0 !important; }
html body .light .day.today .n { background: var(--lime) !important; color: var(--ink) !important; box-shadow: none !important; }
html body .light .ev { background: var(--ink) !important; color: #fff !important; }
.light .round { background: var(--card-w) !important; border: 0 !important; }
.light .item, .light .add { background: var(--card-w) !important; border: 0 !important; }
.light .item .who { background: var(--lime) !important; color: var(--ink) !important; }
html body .light .library { background: var(--card-w) !important; box-shadow: none !important; border-radius: 26px !important; background-image: linear-gradient(to bottom, transparent 0 calc(34px + var(--bh)), var(--ink) calc(34px + var(--bh)), var(--ink) calc(38px + var(--bh)), transparent calc(38px + var(--bh))) !important; background-size: 100% calc(var(--bh) + var(--gap-y)) !important; background-position: 0 8px !important; background-repeat: repeat-y !important; }
.light .library .book.new { background: transparent !important; border: 1.5px dashed rgba(29,20,96,.3) !important; color: var(--ink) !important; }
html body .light .library .book.live::after { background: var(--lime) !important; color: var(--ink) !important; }
.staff-mode .sheet { background: rgba(29,20,96,.4) !important; }
html body .staff-mode .sheet-card { background: var(--card-w) !important; border: 0 !important; border-radius: 28px !important; }
html body .staff-mode .sheet .round { background: #f3effd !important; border-radius: 50% !important; }
html body .staff-mode .recap .recap-head { background: var(--sky) !important; }
.staff-mode .field input, .staff-mode .field textarea { background: #f3effd !important; border: 0 !important; }
/* ===================================================================
STILE "BOOK CLUB": giallo sole, rosa, ciano, lime, lilla, indaco.
Bricolage Grotesque ExtraBold per i titoli, Caveat per le note a mano.
Bottoni "adesivo" con bordo nero e blocco freccia.
=================================================================== */
:root { --ink: #1d1460; --sun: #c3b5ef; --sun-l: #d4c9f5; --orange: #ffffff; --pink: #3b2aa3; --magenta: #3b2aa3; --blush: #e4dcfb; --cyan: #c3b5ef; --cyan-l: #efeafd; --lime: #e4dcfb; --lilac: #c3b5ef; --indigo: #3b2aa3; --paper: #fffdf7; --card-w: #ffffff;
--serif: "Bricolage Grotesque", system-ui, sans-serif; --font: "Bricolage Grotesque", system-ui, -apple-system, sans-serif; }
html, body.staff-mode { background: var(--sun) !important; font-family: var(--font) !important; color: var(--ink) !important; }
html body :is(.poster-head h2, .dash-head h1, .light .pane-head h1, .login h1, .recap-body h2, .big, .tome .bt, .book .bt, .card-head h2, .card-head h3, .f-how h2, .f-past h2, .f-faq h2, .big-list, .step h3, .ep-t, .f-logo) {
font-family: "Bricolage Grotesque", system-ui, sans-serif !important; font-weight: 800 !important; font-stretch: 82%; letter-spacing: -.045em !important; }
.light { font-family: var(--font) !important; }
.hand, .note { font-family: var(--hand); font-weight: 700; }
/* testata: logo + bottone "Menu" arancio */
.top .wrap { background: transparent !important; border: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; margin-top: 6px; }
.staff-mode .logo { font-weight: 800 !important; font-stretch: 82%; font-size: 1.55rem !important; letter-spacing: -.05em !important; }
html body .burger { background: var(--orange) !important; color: var(--ink) !important; border-radius: 10px !important; padding: 0 0 0 16px !important; height: 46px; gap: 0; font-weight: 700; overflow: hidden; box-shadow: 0 3px 0 rgba(0,0,0,.18); }
html body .burger::before { content: "Menu"; order: 0; width: auto; height: auto; background: none; border-radius: 0; padding-right: 14px; font-size: 1rem; color: var(--ink); }
html body .burger::after { content: "≡"; order: 1; display: grid; place-items: center; width: 46px; height: 46px; background: #e4dcfb; font-size: 1.5rem; }
html body .burger[aria-expanded="true"]::after { content: "✕"; font-size: 1rem; }
/* menu a tendina a tutto schermo, rosa con onde */
html body .staff-mode .menu { position: fixed !important; inset: 0 !important; width: auto !important; top: 0 !important; z-index: 35; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; padding: 120px 24px 40px !important;
background: radial-gradient(70% 45% at 20% 30%, #5442c4 0 60%, transparent 61%), radial-gradient(60% 40% at 90% 80%, #5442c4 0 60%, transparent 61%), var(--magenta) !important; display: grid !important; align-content: start; justify-items: center; gap: 14px !important; animation: menu-drop .5s var(--ease) both; }
@keyframes menu-drop { from { clip-path: circle(0 at calc(100% - 50px) 40px); } to { clip-path: circle(150% at calc(100% - 50px) 40px); } }
html body .staff-mode .menu .to-staff { background: #fff !important; color: var(--ink) !important; border-radius: 999px !important; font-size: 1.25rem !important; font-weight: 700 !important; padding: 16px 34px !important; min-width: 220px; justify-content: center !important; gap: 10px; box-shadow: 0 4px 0 rgba(0,0,0,.15); }
html body .staff-mode .menu .to-staff span { color: var(--pink) !important; }
.top { z-index: 50; }
/* bottoni adesivo */
.sbtn { display: inline-flex; align-items: stretch; text-decoration: none; font-weight: 700; font-size: 1.05rem; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 0 rgba(0,0,0,.18); transition: transform .35s var(--spring); }
.sbtn span { padding: 14px 18px; background: var(--pink); color: #fff; }
.sbtn i { display: grid; place-items: center; width: 50px; background: #2c1f86; color: #fff; font-style: normal; font-size: 1.2rem; transition: transform .35s var(--spring); }
.sbtn:hover { transform: translateY(-3px) rotate(-1.5deg); } .sbtn:hover i { transform: translateX(3px); }
/* tendina d'apertura */
.wipe { position: fixed; inset: 0; z-index: 90; background: var(--indigo); display: grid; place-items: center; pointer-events: none; animation: wipe-up 1.2s cubic-bezier(.7,0,.2,1) .55s both; }
.wipe b { color: var(--sun); font: 800 clamp(2.6rem, 9vw, 5rem) var(--font); font-stretch: 82%; letter-spacing: -.05em; animation: pop .6s var(--spring) both; }
@keyframes wipe-up { to { transform: translateY(-100%); border-radius: 0 0 50% 50%; } }
#public[hidden] .wipe { display: none; }
/* HOME */
.light .home.fun { display: block; padding: 0; max-width: none; margin: 0; }
.fun section { position: relative; }
.f-hero { min-height: calc(100vh - 70px); padding: 70px max(20px, env(safe-area-inset-right, 0px)) 60px max(20px, env(safe-area-inset-left, 0px)); overflow: hidden; display: grid; align-content: center; justify-items: start; gap: 22px; max-width: none; }
.f-hero > * { position: relative; z-index: 1; width: 100%; max-width: 1100px; margin-inline: auto; }
.blobs { position: absolute !important; inset: 0; width: 100% !important; height: 100%; z-index: 0 !important; max-width: none !important; }
.blobs .b1 { fill: var(--sun-l); animation: blob 9s ease-in-out infinite alternate; transform-origin: center; }
.blobs .b2 { fill: #b8a8ec; animation: blob 12s ease-in-out infinite alternate-reverse; transform-origin: center; }
@keyframes blob { to { transform: translateY(-18px) scaleX(1.06); } }
.note { font-size: clamp(1.4rem, 3vw, 1.9rem); color: #3b2aa3; transform: rotate(-6deg); text-align: right; line-height: 1; }
.f-hero .poster-head { text-align: left; display: block; }
.f-hero .poster-head h2 { font-size: clamp(3.2rem, 11vw, 8rem) !important; line-height: .86 !important; color: var(--ink) !important; max-width: 10ch; text-align: left; }
.f-hero .word > span { animation: word-pop .9s var(--spring) both; animation-delay: calc(var(--d) + .9s); }
@keyframes word-pop { from { transform: translateY(110%) rotate(8deg) scale(.8); } }
.f-sub { font-size: clamp(1.05rem, 2.2vw, 1.3rem); max-width: 38ch; font-weight: 500; line-height: 1.4; }
.f-hero .sbtn { width: auto; margin-inline: 0; justify-self: start; }
.f-hero > .sbtn { margin-left: max(0px, calc((100% - 1100px) / 2)); }
.badge { position: absolute !important; z-index: 2 !important; right: max(16px, 6vw); bottom: 40px; width: clamp(130px, 18vw, 200px) !important; aspect-ratio: 1; display: grid; place-items: center; margin: 0 !important; }
.badge svg { position: absolute; inset: 0; animation: spin 14s linear infinite; }
.badge text { font: 800 19px var(--font); fill: #3b2aa3; letter-spacing: .5px; }
.badge b { width: 52%; aspect-ratio: 1; border-radius: 50%; background: #3b2aa3; color: var(--sun); display: grid; place-items: center; font: 800 clamp(1.4rem, 3vw, 2rem) var(--font); letter-spacing: -.05em; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 700px) { .badge { position: relative !important; right: auto; bottom: auto; justify-self: end; margin-top: -20px !important; } }
.f-how { background: #fff; padding: 70px max(16px, env(safe-area-inset-right, 0px)) 70px max(16px, env(safe-area-inset-left, 0px)); }
.how-card { max-width: 1100px; margin: 0 auto; background: var(--blush); border-radius: 34px; padding: 50px clamp(16px, 4vw, 44px); }
.f-how h2 { font-size: clamp(2.4rem, 7vw, 4.6rem) !important; text-align: center; margin-bottom: 34px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step { border-radius: 26px; padding: 22px; display: grid; gap: 8px; align-content: start; transition: transform .4s var(--spring); }
.step:nth-child(1) { rotate: -1.5deg; } .step:nth-child(2) { rotate: 1deg; } .step:nth-child(3) { rotate: -.6deg; }
.step:hover { transform: translateY(-6px) rotate(-1deg); }
.step.cyan { background: var(--cyan); } .step.lime { background: var(--lime); } .step.blush { background: #fff; }
.step .hand { font-size: 1.6rem; }
.step svg { width: 120px; height: 90px; }
.step h3 { font-size: 1.9rem !important; line-height: 1; }
.step p { font-weight: 500; }
@media (max-width: 820px) { .steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 26px 6px 22px; margin-top: -20px; } .step { scroll-snap-align: center; } }
.f-list { background: var(--magenta); padding: 90px max(20px, env(safe-area-inset-right, 0px)) 110px max(20px, env(safe-area-inset-left, 0px)); overflow: hidden; display: grid; justify-items: center; }
.f-list::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -30%; height: 70%; background: #5442c4; border-radius: 50% 50% 0 0; }
.big-list { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; font-size: clamp(2.4rem, 8vw, 5.4rem) !important; line-height: .95; color: var(--ink); }
.big-list span { display: block; transition: transform .8s var(--spring); }
.f-list.reveal:not(.in) .big-list span { transform: translateX(-30px); }
.f-list.in .big-list span:nth-child(odd) { animation: slide-l .9s var(--ease) both; } .f-list.in .big-list span:nth-child(even) { animation: slide-r .9s var(--ease) both; }
.big-list span:nth-child(2) { animation-delay: .06s !important; } .big-list span:nth-child(3) { animation-delay: .12s !important; } .big-list span:nth-child(4) { animation-delay: .18s !important; } .big-list span:nth-child(5) { animation-delay: .24s !important; } .big-list span:last-child { animation-delay: .3s !important; color: #fff; }
@keyframes slide-l { from { transform: translateX(-60px); } } @keyframes slide-r { from { transform: translateX(60px); } }
.big-list span:hover { transform: rotate(-3deg) scale(1.04); }
.f-list .badge { position: relative !important; right: auto; bottom: auto; margin-top: 30px !important; }
.f-past { background: #fff; padding: 70px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); }
.past-card { max-width: 1100px; margin: 0 auto; background: var(--sun); border-radius: 34px; padding: 46px clamp(16px, 4vw, 44px); display: grid; justify-items: center; text-align: center; gap: 12px; }
.heart { width: 64px; height: 64px; border-radius: 50%; background: var(--pink); color: #fff; display: grid; place-items: center; font-size: 1.8rem; rotate: -10deg; }
.f-past h2 { font-size: clamp(2.4rem, 7vw, 4.4rem) !important; line-height: .95; }
.past-card > p { max-width: 40ch; font-weight: 500; }
.fun .ep-cards { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; width: 100%; }
html body .fun .ep-card { background: #fff; border-radius: 22px; border: 0; padding: 18px; min-height: 0; text-align: left; box-shadow: 0 5px 0 rgba(0,0,0,.12); }
.fun .ep-card:nth-child(odd) { rotate: -1.2deg; } .fun .ep-card:nth-child(even) { rotate: 1deg; }
.fun .ep-ico { width: 100%; height: 150px; border-radius: 14px; }
.fun .ep-ico svg { width: 60%; height: 80%; }
.fun .ep-t { font-size: 1.6rem !important; }
.fun .ep-go i { background: var(--pink); }
html body .fun .ep-card.ghost:not(.tome) { background: rgba(255,255,255,.4) !important; border: 2px dashed rgba(29,20,96,.3) !important; }
.f-faq { background: #fff; padding: 50px max(16px, env(safe-area-inset-right, 0px)) 90px max(16px, env(safe-area-inset-left, 0px)); display: grid; justify-items: center; gap: 12px; }
.f-faq h2 { font-size: clamp(2.2rem, 6vw, 3.8rem) !important; margin-bottom: 16px; text-align: center; }
.f-faq details { width: min(760px, 100%); background: var(--cyan-l); border-radius: 18px; padding: 0 22px; transition: background .3s; }
.f-faq details[open] { background: #e4dcfb; }
.f-faq summary { list-style: none; cursor: pointer; padding: 20px 0; font-weight: 600; font-size: 1.12rem; display: flex; justify-content: space-between; gap: 12px; }
.f-faq summary::-webkit-details-marker { display: none; }
.f-faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; transition: transform .35s var(--spring); }
.f-faq details[open] summary::after { transform: rotate(45deg); }
.f-faq details p { padding: 0 0 20px; font-weight: 500; }
.f-foot { position: relative; overflow: hidden; background: var(--lilac); padding: 90px 20px 50px; display: grid; justify-items: center; text-align: center; gap: 16px; }
.swoosh { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; }
.swoosh path { stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 2.4s var(--ease) .3s forwards; }
.f-foot > :not(.swoosh) { position: relative; z-index: 1; }
.f-logo { font-size: clamp(3rem, 12vw, 7rem); color: #fff; line-height: 1; text-shadow: 0 5px 0 rgba(0,0,0,.15); }
.f-foot .hand { font-size: 1.7rem; color: var(--ink); }
.f-foot small { color: var(--ink); opacity: .7; margin-top: 20px; }
.reveal:not(.in) { transform: translateY(40px); opacity: .7; }
/* ---------- AREA STAFF in stile adesivo ---------- */
.light.staff, #archivio.light { background: transparent !important; }
html body .light .login { background: #fff !important; border: 3px solid var(--ink) !important; box-shadow: 8px 8px 0 var(--ink) !important; border-radius: 26px !important; }
.light .login h1 em { font-family: var(--hand) !important; color: var(--pink) !important; font-weight: 700 !important; }
.light .login .eyebrow { color: var(--pink) !important; }
html body .light .solid, html body .light .login .solid, html body .staff-mode .edit .solid { background: var(--pink) !important; color: #fff !important; border-radius: 10px !important; box-shadow: 0 4px 0 #22186b !important; }
html body .light .ghost:not(.tome), html body .dash-head .ghost:not(.tome), html body .light .cal-nav .ghost:not(.tome) { background: #fff !important; border: 2.5px solid var(--ink) !important; border-radius: 10px !important; box-shadow: 0 3px 0 var(--ink) !important; }
.side { background: #fff !important; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.side-logo { background: var(--pink) !important; }
html body .light .pill-nav .ink { background: var(--sun) !important; border: 2.5px solid var(--ink); border-radius: 16px !important; }
html body .light .pill-nav button[aria-selected="true"] { color: var(--ink) !important; }
.light .pill-nav button { color: #444 !important; }
html body .light .card { background: #fff !important; border: 3px solid var(--ink) !important; box-shadow: 6px 6px 0 var(--ink); border-radius: 22px !important; }
html body .light .card:hover { transform: translate(-2px, -2px) rotate(-.5deg); box-shadow: 9px 9px 0 var(--ink); }
html body .light .c-lav { background: var(--cyan) !important; } html body .light .c-sky { background: var(--lime) !important; } html body .light .c-rose { background: var(--blush) !important; }
.b-base, .c-sky .b-base, .c-rose .b-base { background: var(--ink) !important; }
.cell.lav { background: var(--cyan-l) !important; } .cell.sky { background: #e4dcfb !important; } .cell.rose { background: #f3effd !important; } .cell.date, .pipe thead th { background: #efeafd !important; }
.avatar { background: var(--sun) !important; border: 2px solid var(--ink); }
.chip.dark { background: var(--pink) !important; color: #fff !important; }
html body .light .day { background: #fff !important; border: 2px solid var(--ink) !important; box-shadow: 0 3px 0 var(--ink); }
html body .light .day.out { opacity: .4; }
html body .light .day.today .n { background: var(--pink) !important; color: #fff !important; }
html body .light .ev { background: var(--indigo) !important; color: #fff !important; }
.light .round { background: #fff !important; border: 2.5px solid var(--ink) !important; }
html body .light .item, html body .light .add { background: #fff !important; border: 2.5px solid var(--ink) !important; box-shadow: 0 4px 0 var(--ink); }
.light .item .who { background: var(--sun) !important; color: var(--ink) !important; }
html body .light .library { background: #fff !important; border: 3px solid var(--ink) !important; box-shadow: 6px 6px 0 var(--ink) !important; background-image: linear-gradient(to bottom, transparent 0 calc(34px + var(--bh)), var(--ink) calc(34px + var(--bh)), var(--ink) calc(39px + var(--bh)), transparent calc(39px + var(--bh))) !important; background-size: 100% calc(var(--bh) + var(--gap-y)) !important; background-position: 0 8px !important; background-repeat: repeat-y !important; }
html body .light .library .book.live::after { background: var(--pink) !important; color: #fff !important; }
html body .staff-mode .sheet-card { border: 3px solid var(--ink) !important; box-shadow: 10px 10px 0 var(--ink); }
html body .staff-mode .recap .recap-head { background: var(--cyan) !important; }
.staff-mode .field input, .staff-mode .field textarea { background: #f6f3fe !important; border: 2px solid var(--ink) !important; }
/* ================= Palette unica: lilla, indaco scuro, bianco ================= */
:root { --ink: #1d1460; --sun: #c3b5ef; --sun-l: #d4c9f5; --indigo: #3b2aa3; --lilac: #c3b5ef; --lilac-l: #e4dcfb; }
html, body.staff-mode { background: var(--lilac) !important; color: var(--ink) !important; }
html body .burger { background: #fff !important; color: var(--indigo) !important; }
html body .burger::before { color: var(--indigo); }
html body .burger::after { background: var(--indigo) !important; color: #fff; }
.sbtn span { background: #fff; color: var(--indigo); }
.sbtn i { background: var(--indigo); color: #fff; }
.sbtn { box-shadow: 0 4px 0 rgba(29,20,96,.35); }
.note { color: var(--indigo); }
.blobs .b1 { fill: #d4c9f5; } .blobs .b2 { fill: #b8a8ec; }
.step.cyan { background: var(--lilac); } .step.lime { background: var(--indigo); color: #fff; } .step.lime svg g { stroke: #fff; } .step.blush { background: #fff; }
.how-card { background: var(--lilac-l); }
.f-list { background: var(--indigo); }
.f-list::before { background: #5442c4; }
.big-list { color: #fff !important; } .big-list span:last-child { color: var(--lilac) !important; }
.f-list .badge text { fill: #fff; } .f-list .badge b { background: #fff; color: var(--indigo); }
.badge text { fill: var(--indigo); } .badge b { background: var(--indigo); color: #fff; }
.past-card { background: var(--lilac); }
.heart { background: var(--indigo); }
.fun .ep-go i { background: var(--indigo); }
.f-faq details { background: #f3effd; } .f-faq details[open] { background: var(--lilac-l); }
html body .staff-mode .menu { background: radial-gradient(70% 45% at 20% 30%, #5442c4 0 60%, transparent 61%), radial-gradient(60% 40% at 90% 80%, #5442c4 0 60%, transparent 61%), var(--indigo) !important; }
html body .staff-mode .menu .to-staff span { color: var(--indigo) !important; }
html body .light .solid, html body .light .login .solid, html body .staff-mode .edit .solid { background: var(--indigo) !important; box-shadow: 0 4px 0 #22186b !important; }
.light .login h1 em { color: var(--indigo) !important; } .light .login .eyebrow { color: var(--indigo) !important; }
html body .light .day.today .n { background: var(--indigo) !important; }
.chip.dark { background: var(--indigo) !important; }
html body .light .c-lav { background: var(--lilac) !important; } html body .light .c-sky { background: #fff !important; } html body .light .c-rose { background: var(--lilac-l) !important; }
html body .light .pill-nav .ink { background: var(--lilac) !important; }
.avatar, .light .item .who { background: var(--lilac) !important; }
html body .light .library .book.live::after { background: var(--indigo) !important; }
html body .staff-mode .recap .recap-head { background: var(--lilac) !important; }
/* transizione a onda */
.wipe { display: none !important; }
.tr { position: fixed; inset: 0; z-index: 95; pointer-events: none; visibility: hidden; }
.tr svg { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; fill: var(--indigo); transform: translate(-110%, 110%) rotate(-8deg); }
.tr b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0; color: #fff; font: 800 clamp(2.4rem, 8vw, 4.6rem) var(--font); font-stretch: 82%; letter-spacing: -.05em; }
.tr.cover, .tr.held, .tr.leave { visibility: visible; pointer-events: auto; }
.tr.leave { pointer-events: none; }
.tr.cover svg { animation: tr-in .56s cubic-bezier(.7,0,.25,1) both; }
.tr.held svg { transform: translate(0, 0) rotate(0) scale(1.6); }
.tr.leave svg { animation: tr-out .65s cubic-bezier(.7,0,.25,1) both; }
.tr.cover b { animation: tr-logo .56s var(--ease) .15s both; }
.tr.held b { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tr.leave b { animation: tr-logo-out .3s var(--ease) both; }
@keyframes tr-in { from { transform: translate(-110%, 110%) rotate(-8deg); } to { transform: translate(0, 0) rotate(0) scale(1.6); } }
@keyframes tr-out { from { transform: translate(0, 0) rotate(0) scale(1.6); } to { transform: translate(110%, -110%) rotate(8deg) scale(1.2); } }
@keyframes tr-logo { from { opacity: 0; transform: translate(-50%, -40%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes tr-logo-out { to { opacity: 0; transform: translate(-50%, -60%) scale(.9); } }
.page-in { animation: none !important; }
/* ================= Font "What is Recycling", contrasto giallo, passaggi morbidi ================= */
:root { --display: "Caprasimo", "Cooper Black", Georgia, serif; --butter: #f5d76e; --butter-d: #e6bf3e; }
html body:not(#_) :is(.poster-head h2, .dash-head h1, .light .pane-head h1, .login h1, .recap-body h2, .big, .tome .bt, .book .bt, .card-head h2, .card-head h3, .f-how h2, .f-past h2, .f-faq h2, .big-list, .step h3, .ep-t, .f-logo, .staff-mode .logo) {
font-family: var(--display) !important; font-weight: 400 !important; font-stretch: normal !important; letter-spacing: -.01em !important; font-synthesis: none; }
.f-hero .poster-head h2 { line-height: .92 !important; font-size: clamp(2.8rem, 9vw, 6.6rem) !important; max-width: 13ch !important; }
.f-hero .word > span { animation: none !important; transform: none !important; }
.f-hero .poster-head h2 .word:hover > span { transform: none !important; }
.staff-mode .logo { font-size: 1.5rem !important; }
/* sezioni che si fondono, niente stacchi netti */
.f-how, .f-past, .f-faq { background: transparent !important; }
.f-hero { padding-bottom: 30px; }
.how-card { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.3)) !important; box-shadow: 0 30px 60px -40px rgba(29,20,96,.5); }
.f-list { background: var(--indigo) !important; margin: 40px 0; padding-block: 130px 150px !important; }
.f-list::before, .f-list::after { content: ""; position: absolute; left: 0; right: 0; height: 90px; background-repeat: no-repeat; background-size: 100% 100%; border-radius: 0 !important; bottom: auto; }
.f-list::before { top: -1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H400 V40 C 330 90, 260 10, 200 45 S 70 90, 0 35 Z' fill='%23c3b5ef'/%3E%3C/svg%3E"); }
.f-list::after { bottom: -1px; top: auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90 H400 V50 C 330 0, 260 80, 200 45 S 70 0, 0 55 Z' fill='%23c3b5ef'/%3E%3C/svg%3E"); }
.past-card { background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.25)) !important; }
.f-faq details { background: rgba(255,255,255,.6) !important; } .f-faq details[open] { background: #fff !important; }
.f-foot { background: transparent !important; }
/* un po' di contrasto: giallo burro, come il bidone */
.badge b { background: var(--butter) !important; color: var(--indigo) !important; }
.f-list .badge b { background: var(--butter) !important; }
.big-list span:last-child { color: var(--butter) !important; }
.step.blush { background: var(--butter) !important; }
.heart { background: var(--butter) !important; color: var(--indigo) !important; }
.sbtn i { background: var(--butter) !important; color: var(--indigo) !important; }
html body .burger::after { background: var(--butter) !important; color: var(--indigo) !important; }
.note { color: var(--indigo); }
.f-hero .poster-head h2 { text-shadow: none; }
.fun .ep-go i { background: var(--butter) !important; color: var(--indigo) !important; }
html body .light .c-sky { background: var(--butter) !important; }
html body .light .day.today .n { background: var(--butter) !important; color: var(--indigo) !important; }
html body .light .library .book.live::after { background: var(--butter) !important; color: var(--indigo) !important; }
html body .light .pill-nav .ink { background: var(--butter) !important; }
/* transizione: cerchio indaco che si apre dal menu e si richiude */
.tr { position: fixed; inset: 0; z-index: 95; background: var(--indigo); display: grid; place-items: center; pointer-events: none; visibility: hidden; clip-path: circle(0% at 92% 4%); -webkit-clip-path: circle(0% at 92% 4%); }
.tr svg { display: none; }
.tr b { color: #fff; font: 400 clamp(2.4rem, 8vw, 4.6rem) var(--display); position: static; transform: none; opacity: 1; }
.tr.cover { visibility: visible; pointer-events: auto; animation: tr-open .52s cubic-bezier(.7,0,.3,1) both; }
.tr.leave { visibility: visible; animation: tr-close .6s cubic-bezier(.7,0,.3,1) both; }
.tr.cover b, .tr.leave b { animation: none; }
@keyframes tr-open { from { clip-path: circle(0% at 92% 4%); -webkit-clip-path: circle(0% at 92% 4%); } to { clip-path: circle(150% at 92% 4%); -webkit-clip-path: circle(150% at 92% 4%); } }
@keyframes tr-close { from { clip-path: circle(150% at 8% 96%); -webkit-clip-path: circle(150% at 8% 96%); } to { clip-path: circle(0% at 8% 96%); -webkit-clip-path: circle(0% at 8% 96%); } }
/* ================= Correzioni da iPhone ================= */
/* testata non fissa */
.top { position: relative !important; top: auto !important; }
.top .wrap { width: auto !important; max-width: 1180px; margin: 8px auto 0 !important; padding-left: max(16px, env(safe-area-inset-left, 0px)) !important; padding-right: max(16px, env(safe-area-inset-right, 0px)) !important; }
/* onde senza righe nette */
.blobs .b2 { fill: var(--lilac) !important; }
.blobs .b1 { fill: #d4c9f5 !important; }
.f-list::before, .f-list::after { background-color: transparent !important; }
/* Menu e bottone: cerchietti disegnati a mano, come nell'immagine di riferimento */
html body .burger { background: var(--ring) center / 100% 100% no-repeat !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 22px !important; height: 48px; overflow: visible; }
html body .burger::before { content: "MENU"; color: var(--indigo) !important; font: 700 .9rem var(--font); letter-spacing: .08em; padding: 0; }
html body .burger::after { display: none !important; }
html body .burger[aria-expanded="true"]::before { content: "CHIUDI"; }
.sbtn { background: var(--ring) center / 100% 100% no-repeat; box-shadow: none !important; border-radius: 0; overflow: visible; }
.sbtn span { background: transparent !important; color: var(--indigo) !important; padding: 16px 6px 16px 28px; text-transform: uppercase; letter-spacing: .06em; font-size: .95rem; }
.sbtn i { background: transparent !important; color: var(--indigo) !important; width: auto; padding-right: 28px; }
.sbtn:hover { transform: rotate(-2deg) scale(1.03); }
/* niente barra di scorrimento sotto "Come funziona" */
.steps { scrollbar-width: none; -ms-overflow-style: none; }
.steps::-webkit-scrollbar { display: none; }
/* ================= Desktop: allineamento e piè di pagina ================= */
:root { --ring-fill: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M52%203.2%20C%2079%202.4%2097.5%209.5%2097%2020.6%20C%2096.4%2032.4%2075%2038.2%2048.6%2037.4%20C%2021.5%2036.8%202.8%2030.6%203.1%2019.4%20C%203.4%208.6%2024.5%202.6%2055%204.4%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%233b2aa3%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20vector-effect%3D%22non-scaling-stroke%22/%3E%3C/svg%3E"); }
.f-hero { --edge: max(20px, calc((100% - 1140px) / 2)); }
.f-hero > :not(.blobs):not(.badge) { width: auto !important; max-width: none !important; margin-left: var(--edge) !important; margin-right: var(--edge) !important; justify-self: stretch; }
.f-hero .note { justify-self: end; text-align: right; }
.f-hero .poster-head h2 { max-width: 12ch !important; }
.f-hero > p.f-sub:not(.blobs):not(.badge) { max-width: 40ch !important; justify-self: start; }
.f-hero .poster-head { display: block !important; text-align: left !important; justify-items: start !important; }
.f-hero .poster-head h2 { margin: 0 !important; text-align: left !important; }
.f-hero > .sbtn { justify-self: start !important; width: max-content !important; }
@media (min-width: 900px) { .badge { right: var(--edge) !important; bottom: 70px !important; } }
.top .wrap { max-width: 1140px !important; }
/* piè di pagina: onda più in basso, bottone pieno sempre leggibile */
.f-foot { padding: 110px 20px 70px !important; }
.f-foot .sbtn, .f-hero > .sbtn { background-image: var(--ring-fill) !important; }
.f-foot small { position: relative; z-index: 2; color: #fff !important; opacity: 1; margin-top: 30px !important; font-weight: 600; text-shadow: 0 1px 0 rgba(29,20,96,.6), 0 0 10px rgba(29,20,96,.7); }
.f-logo { color: #fff !important; text-shadow: 0 5px 0 rgba(29,20,96,.25) !important; }
.f-foot .hand { color: #fff !important; font-size: 2rem !important; text-shadow: 0 2px 0 rgba(29,20,96,.55), 0 0 14px rgba(29,20,96,.75); }
/* ================= Movimento legato allo scroll (fluido: solo transform) ================= */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.fun section, .f-foot { --p: .5; --e: 1; }
.reveal:not(.in) { transform: none !important; opacity: 1 !important; }
/* apertura */
.f-hero .blobs .b1 { animation: none; transform: translateY(calc(var(--p) * -140px)) scaleX(1.05); }
.f-hero .blobs .b2 { animation: none; transform: translateY(calc(var(--p) * -60px)); }
.f-hero .poster-head { transform: translateY(calc(var(--p) * 90px)); will-change: transform; }
.f-hero .f-sub { transform: translateY(calc(var(--p) * 60px)); }
.f-hero .note { transform: rotate(-6deg) translateY(calc(var(--p) * -40px)); }
.f-hero .badge { translate: 0 calc(var(--p) * -120px); }
.f-hero .badge svg { animation-duration: 10s; }
@media (max-width: 700px) { .f-hero .badge { translate: none; } .f-hero .poster-head, .f-hero .f-sub { transform: none; } }
/* come funziona: le carte arrivano a ventaglio */
.f-how .how-card { transform: translateY(calc((1 - var(--e)) * 80px)) scale(calc(.94 + var(--e) * .06)); }
.f-how .step { transform: translateY(calc((1 - var(--e)) * 140px)) rotate(calc((1 - var(--e)) * 10deg)); transition: transform .5s var(--spring); }
.f-how .step:nth-child(2) { transform: translateY(calc((1 - var(--e)) * 200px)) rotate(calc((1 - var(--e)) * -8deg)); }
.f-how .step:nth-child(3) { transform: translateY(calc((1 - var(--e)) * 260px)) rotate(calc((1 - var(--e)) * 12deg)); }
.f-how .step:hover { transform: translateY(-8px) rotate(-1.5deg) !important; }
/* elenco: le righe scorrono in direzioni opposte */
.f-list.in .big-list span { animation: none !important; }
.big-list span:nth-child(odd) { transform: translateX(calc((var(--p) - .5) * 220px)); }
.big-list span:nth-child(even) { transform: translateX(calc((var(--p) - .5) * -220px)); }
.big-list span { transition: none; will-change: transform; }
.f-list .badge svg { animation: none; transform: rotate(calc(var(--p) * 540deg)); }
/* puntate: le carte salgono una dopo l'altra */
.fun .ep-card { transform: translateY(calc((1 - var(--e)) * (90px + var(--i, 0) * 50px))) rotate(calc((1 - var(--e)) * 6deg)); }
.fun .ep-card:hover { transform: translateY(-8px) rotate(-1.5deg) !important; }
.past-card { transform: translateY(calc((1 - var(--e)) * 60px)); }
.f-past .heart { transform: scale(calc(.4 + var(--e) * .6)) rotate(calc(var(--e) * 360deg - 10deg)); }
/* domande: entrano da lati alterni */
.f-faq details { transform: translateX(calc((1 - var(--e)) * (var(--i, 0) + 1) * 50px)); }
.f-faq details:nth-of-type(even) { transform: translateX(calc((1 - var(--e)) * (var(--i, 0) + 1) * -50px)); }
.f-faq h2 { transform: scale(calc(.85 + var(--e) * .15)); }
/* piè di pagina: l'onda si disegna mentre arrivi */
.swoosh path { animation: none !important; stroke-dasharray: 900; stroke-dashoffset: calc((1 - var(--e)) * 900); }
.f-logo { transform: translateY(calc((1 - var(--e)) * 60px)) scale(calc(.8 + var(--e) * .2)); }
/* accordion fluido */
.f-faq details p { animation: faq-open .45s var(--ease); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-8px); } }
/* ===== "be." cerchiato sottile, come il logo della chiesa ===== */
html body:not(#_) .logo .be, html body:not(#_) .f-logo .be { font-family: "Bricolage Grotesque", system-ui, sans-serif !important; font-weight: 800 !important; font-stretch: 100% !important; letter-spacing: -.06em !important;
display: inline-grid; place-items: center; width: 2.05em; height: 2.05em; border: .075em solid currentColor; border-radius: 50%; font-size: .64em; line-height: 1; margin-right: .2em; vertical-align: middle; position: relative; top: -.06em; padding-left: .04em; opacity: 1; transform: none; }
.logo { align-items: center !important; }
.f-logo .be { border-width: .06em; }
.badge b { box-shadow: inset 0 0 0 .14em var(--butter), inset 0 0 0 calc(.14em + 2px) var(--indigo); font-family: "Bricolage Grotesque", system-ui, sans-serif !important; font-weight: 800; letter-spacing: -.06em; }
.tr b .be { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border: .06em solid currentColor; border-radius: 50%; font: 800 .78em "Bricolage Grotesque", sans-serif; letter-spacing: -.06em; margin-right: .2em; vertical-align: middle; }
/* ===== Menu a comparsa (stile Aardvark): pannello che si apre dal centro ===== */
html.pop-lock, html.pop-lock body { overflow: hidden; }
.pop { position: fixed; inset: 0; z-index: 90; display: grid; padding: max(10px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); background: rgba(228,220,251,0); transition: background .35s ease; }
.pop.open { background: rgba(228,220,251,.85); }
.pop.closing { background: rgba(228,220,251,0); pointer-events: none; }
.pop-panel { position: relative; overflow: hidden; border-radius: 30px; background: var(--indigo); color: #fff; display: grid; grid-template-rows: auto 1fr; transform-origin: 50% 42%; will-change: transform, opacity; }
.pop.open .pop-panel { animation: pop-in .62s cubic-bezier(.22,1.2,.36,1) both; }
.pop.closing .pop-panel { animation: pop-out .3s cubic-bezier(.55,0,.8,.2) both; }
@keyframes pop-in { 0% { transform: scale(.32); opacity: 0; border-radius: 70px; } 35% { opacity: 1; } 100% { transform: none; opacity: 1; border-radius: 30px; } }
@keyframes pop-out { to { transform: scale(.55); opacity: 0; border-radius: 70px; } }
.pop-blobs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pop-blobs path { fill: #5442c4; transform-box: fill-box; transform-origin: center; }
.pop.open .pop-blobs .b1 { animation: blob-a 9s ease-in-out infinite alternate; }
.pop.open .pop-blobs .b2 { animation: blob-b 7s ease-in-out infinite alternate; }
@keyframes blob-a { to { transform: translate(14px, -10px) scale(1.04) rotate(-2deg); } }
@keyframes blob-b { to { transform: translate(-16px, -14px) scale(1.1); } }
.pop-top { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 0 22px; }
.pop-logo { font-family: var(--display); font-size: 1.45rem; color: #fff; }
.pop-x { width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); font: 700 1.1rem var(--font); cursor: pointer; display: grid; place-items: center; transition: transform .35s var(--spring); }
.pop-x:hover { transform: rotate(90deg); }
.pop-body { position: relative; display: grid; align-content: center; justify-items: center; gap: 14px; padding: 16px 22px 70px; min-width: 0; }
.pop-body.in > * { animation: pop-item .55s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.14s + var(--k, 0) * .055s); }
@keyframes pop-item { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.pbtn { display: inline-flex; align-items: stretch; background: #fff; color: var(--ink); border: 0; border-radius: 10px; font: 700 1.2rem var(--font); text-decoration: none; overflow: hidden; box-shadow: 0 5px 0 rgba(0,0,0,.2); cursor: pointer; padding: 0; transition: transform .3s var(--spring); }
.pbtn span { padding: 16px 24px; }
.pbtn i { font-style: normal; display: grid; place-items: center; width: 56px; border-left: 2px solid rgba(29,20,96,.12); transition: transform .3s var(--spring); }
.pbtn:hover { transform: translateY(-2px) rotate(-1.5deg); } .pbtn:hover i { transform: translateX(3px); } .pbtn:active { transform: scale(.97); }
.ppill { background: #fff; color: var(--ink); border-radius: 999px; padding: 13px 28px; font: 700 1.2rem var(--font); text-decoration: none; box-shadow: 0 5px 0 rgba(0,0,0,.2); transition: transform .3s var(--spring); }
.ppill:hover { transform: translateY(-2px) rotate(1.5deg); }
.pop-login h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 11vw, 3.6rem); line-height: .95; margin: 0 0 2px; text-align: center; color: #fff; }
.pop-login h2 em { font-style: normal; color: var(--butter); }
.pop-login p { margin: 0 0 8px; text-align: center; max-width: 28ch; color: rgba(255,255,255,.85); font: 500 1rem/1.4 var(--font); }
.pf { position: relative; width: min(100%, 340px); display: block; }
.pop .pf input { display: block; width: 100%; box-sizing: border-box; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: 600 1.05rem var(--font); padding: 16px 56px 16px 24px; outline: none; box-shadow: 0 4px 0 rgba(0,0,0,.18); transition: box-shadow .2s; -webkit-appearance: none; appearance: none; }
.pop .pf input::placeholder { color: rgba(29,20,96,.45); }
.pop .pf input:focus { box-shadow: 0 0 0 4px #c3b5ef, 0 4px 0 rgba(0,0,0,.18); }
.pf .eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; background: none; color: var(--indigo); cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.pf .eye .slash { display: none; } .pf .eye[aria-pressed="false"] .slash { display: inline; }
.perr { color: var(--butter); min-height: 1.3em; font: 600 .95rem var(--font); text-align: center; }
.pop-login .pbtn { margin-top: 2px; }
.pback { background: rgba(255,255,255,.16); color: #fff; border: 0; border-radius: 999px; padding: 10px 18px; font: 600 .95rem var(--font); cursor: pointer; transition: background .2s; }
.pback:hover { background: rgba(255,255,255,.28); }
/* mini: tendina piccola sotto MENU */
.pop.mini { z-index: 45; display: block; }
.pop.mini.open { background: rgba(228,220,251,.35); }
.pop.mini .pop-panel { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 74px); right: max(16px, env(safe-area-inset-right, 0px)); width: auto; border-radius: 24px; transform-origin: 85% 0; display: block; box-shadow: 0 22px 40px -18px rgba(29,20,96,.6); }
.pop.mini.open .pop-panel { animation: mini-in .5s cubic-bezier(.22,1.3,.36,1) both; }
.pop.mini.closing .pop-panel { animation: mini-out .22s ease-in both; }
@keyframes mini-in { from { transform: translateY(-10px) scale(.6); opacity: 0; } }
@keyframes mini-out { to { transform: translateY(-8px) scale(.85); opacity: 0; } }
.pop.mini .pop-body { padding: 18px; gap: 10px; }
.pop.mini .pbtn { font-size: 1.05rem; } .pop.mini .pbtn span { padding: 13px 18px; } .pop.mini .pbtn i { width: 46px; }
.pop.mini .ppill { font-size: 1.05rem; padding: 11px 24px; }
.pop.grow .pop-panel { animation: none; }
.pop.full.closing .pop-panel { animation: pop-out .3s cubic-bezier(.55,0,.8,.2) both; }
.pop-top.in > * { animation: pop-item .5s cubic-bezier(.22,1,.36,1) both; animation-delay: .2s; }
/* ===== Le puntate passate: uno scaffale vero ===== */
.past-card .bcase { width: 100%; display: grid; gap: 34px; margin-top: 30px; text-align: left; }
.bshelf { display: grid; min-width: 0; }
.brow { display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 0 12px; min-width: 0; }
.bplank { height: 14px; border-radius: 7px; background: var(--indigo); box-shadow: inset 0 -4px 0 #1d1460, 0 16px 22px -12px rgba(29,20,96,.55); position: relative; z-index: 1; }
.bk { flex: none; width: var(--bw); height: calc(var(--bw) * 1.45); margin: 0 6px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; transform-origin: 50% 100%; transition: transform .5s var(--spring); position: relative; z-index: 2; }
.bk-c { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 4px; padding: 12px 10px 10px 18px; border-radius: 4px 10px 10px 4px; background: var(--bg); color: var(--fg); text-align: left;
box-shadow: inset 8px 0 0 rgba(0,0,0,.18), inset 10px 0 0 rgba(255,255,255,.14), 4px 3px 0 -1px #fff, 5px 3px 0 -1px rgba(29,20,96,.18), 0 16px 22px -14px rgba(29,20,96,.7); }
.bk-t { font-family: var(--display); font-size: calc(var(--bw) * .135); line-height: 1; overflow-wrap: anywhere; }
.bk-a { display: grid; place-items: center; min-height: 0; } .bk-a svg { width: 78%; height: auto; max-height: 100%; }
.bk-d { font: 700 calc(var(--bw) * .07) var(--font); letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.bk:not(.bk-ghost):hover, .bk:not(.bk-ghost):focus-visible { transform: translateY(-12px) rotate(-4deg); }
.bk:not(.bk-ghost):active { transform: translateY(-6px) rotate(-2deg) scale(.98); }
.bk.bk-ghost { cursor: default; }
.bk.bk-ghost .bk-c { background: rgba(255,255,255,.35); border: 2px dashed rgba(29,20,96,.35); box-shadow: none; place-items: center; grid-template-rows: 1fr auto; color: var(--indigo); text-align: center; padding: 12px; }
.bk.bk-ghost b { font-family: var(--display); font-weight: 400; font-size: calc(var(--bw) * .4); align-self: end; }
.sp { flex: none; width: var(--w); height: var(--h); max-height: calc(var(--bw) * 1.55); background: var(--c); border-radius: 4px 4px 2px 2px; position: relative; box-shadow: inset -3px 0 0 rgba(0,0,0,.1); transition: transform .4s var(--spring); }
.sp::before { content: ""; position: absolute; left: 3px; right: 3px; top: 14%; height: 4px; background: var(--t); opacity: .8; border-radius: 2px; box-shadow: 0 7px 0 var(--t); }
.sp::after { content: ""; position: absolute; left: 50%; bottom: 12%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--t); opacity: .8; }
.sp.lean { transform: rotate(7deg); transform-origin: 0 100%; margin-right: 8px; }
.brow:hover .sp:not(.lean) { transform: translateY(-2px); }
.reveal.in .bk { animation: bk-in .7s var(--spring) both; animation-delay: calc(var(--i, 0) * .08s + .1s); }
@keyframes bk-in { from { transform: translateY(30px) rotate(6deg); opacity: 0; } }
/* Come funziona su telefono: le schede scorrono solo in orizzontale, niente movimenti verticali */
@media (max-width: 820px) {
html body .steps { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; padding: 26px 6px 22px; }
html body .f-how .step { transform: none !important; transition: none; }
}
@media (hover: none) { html body .f-how .step:hover, html body .step:hover { transform: none !important; } }
/* conferma uscita */
.bye { position: fixed; inset: 0; z-index: 92; display: grid; place-items: center; padding: 16px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); background: rgba(29,20,96,0); transition: background .3s; }
.bye.open { background: rgba(29,20,96,.4); }
.bye.closing { background: rgba(29,20,96,0); pointer-events: none; }
.bye-card { position: relative; overflow: hidden; width: min(100%, 380px); border-radius: 28px; background: var(--indigo); color: #fff; padding: 30px 24px 24px; display: grid; gap: 12px; justify-items: center; text-align: center; box-shadow: 0 30px 60px -20px rgba(29,20,96,.7); }
.bye.open .bye-card { animation: pop-in .5s cubic-bezier(.22,1.25,.36,1) both; }
.bye.closing .bye-card { animation: pop-out .24s ease-in both; }
.bye-card > *:not(svg) { position: relative; }
.bye-card h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 8vw, 2.4rem); line-height: 1; color: #fff; }
.bye-card h2 em { font-style: normal; color: var(--butter); }
.bye-card p { margin: 0 0 6px; color: rgba(255,255,255,.85); font: 500 .98rem/1.4 var(--font); max-width: 30ch; }
.bye-act { display: grid; gap: 10px; justify-items: center; }
/* bottoni a pillola uguali: quello principale pieno bianco */
.pback { font-size: 1rem; padding: 12px 24px; }
.pback.pmain { background: #fff; color: var(--ink); font-weight: 700; padding: 14px 34px; font-size: 1.08rem; box-shadow: 0 5px 0 rgba(0,0,0,.18); transition: transform .3s var(--spring), background .2s; }
.pback.pmain:hover { background: #fff; transform: translateY(-2px); }
.pback.pmain:active { transform: scale(.97); }
.pop-login .pmain { margin-top: 4px; }
/* ===== BOTTONI UNIFORMI: tutti a pillola come "Torna al sito" ===== */
html body:not(#_) :is(.sbtn, .pbtn, .ppill, .pback, .solid, .ghost, .del, .burger) {
display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; width: auto; height: auto !important; min-height: 0;
border: 0 !important; border-radius: 999px !important; padding: 12px 24px !important; overflow: visible;
background: rgba(59,42,163,.12) !important; background-image: none !important; color: var(--ink) !important; box-shadow: none !important;
font: 700 1rem/1.1 var(--font) !important; text-transform: none !important; letter-spacing: 0 !important; text-decoration: none !important;
cursor: pointer; transition: background .2s, transform .3s var(--spring) !important; -webkit-tap-highlight-color: transparent; }
html body:not(#_) :is(.sbtn, .pbtn, .ppill, .pback, .solid, .ghost, .del, .burger):hover { background: rgba(59,42,163,.2) !important; transform: translateY(-1px) !important; }
html body:not(#_) :is(.sbtn, .pbtn, .ppill, .pback, .solid, .ghost, .del, .burger):active { transform: scale(.97) !important; }
html body:not(#_) :is(.sbtn, .pbtn) :is(span, i) { all: unset; font: inherit !important; color: inherit !important; background: none !important; padding: 0 !important; width: auto !important; text-transform: none !important; letter-spacing: 0 !important; }
html body:not(#_) :is(.sbtn, .pbtn, .ppill, .pback, .solid, .ghost, .del, .burger, .round, .pop-x)[hidden] { display: none !important; }
html body:not(#_) :is(.sbtn, .pbtn) i { transition: transform .3s var(--spring); }
html body:not(#_) :is(.sbtn, .pbtn):hover i { transform: translateX(3px); }
/* principale: pieno */
html body:not(#_) :is(.solid, .pmain, .f-foot .sbtn, .pop .pbtn, .f-hero .sbtn) { background: var(--indigo) !important; color: #fff !important; padding: 13px 30px !important; box-shadow: 0 5px 0 rgba(29,20,96,.22) !important; }
html body:not(#_) :is(.solid, .pmain, .f-foot .sbtn, .pop .pbtn, .f-hero .sbtn):hover { background: var(--indigo) !important; transform: translateY(-2px) !important; }
/* su fondo scuro (menu, conferma, footer, foto) */
html body:not(#_) :is(.pop, .bye, .f-foot, .lightbox) :is(.pback, .ppill, .ghost, .sbtn) { background: rgba(255,255,255,.16) !important; color: #fff !important; }
html body:not(#_) :is(.pop, .bye, .f-foot, .lightbox) :is(.pback, .ppill, .ghost, .sbtn):hover { background: rgba(255,255,255,.28) !important; }
html body:not(#_) :is(.pop, .bye, .f-foot) :is(.pmain, .pbtn, .sbtn) { background: #fff !important; color: var(--ink) !important; box-shadow: 0 5px 0 rgba(0,0,0,.18) !important; }
html body:not(#_) :is(.pop, .bye, .f-foot) :is(.pmain, .pbtn, .sbtn):hover { background: #fff !important; }
/* elimina */
html body:not(#_) :is(.del, .ghost.danger) { background: rgba(192,57,43,.1) !important; color: #b3392c !important; }
html body:not(#_) :is(.del, .ghost.danger):hover { background: rgba(192,57,43,.18) !important; }
html body:not(#_) .del { padding: 8px 16px !important; font-size: .9rem !important; }
/* MENU / CHIUDI */
html body:not(#_) .burger { padding: 11px 22px !important; }
html body:not(#_) .burger > span { display: none !important; }
html body:not(#_) .burger::before { content: "Menu"; font: inherit; color: inherit !important; letter-spacing: 0; padding: 0; }
html body:not(#_) .burger[aria-expanded="true"]::before { content: "Chiudi"; }
html body:not(#_) .burger::after { display: none !important; }
/* tondi con icona: stessa famiglia */
html body:not(#_) :is(.round, .pop-x) { width: 44px !important; height: 44px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; display: inline-grid !important; place-items: center; background: rgba(59,42,163,.12) !important; color: var(--ink) !important; box-shadow: none !important; font: 700 1rem var(--font) !important; cursor: pointer; transition: background .2s, transform .3s var(--spring) !important; }
html body:not(#_) :is(.round, .pop-x):hover { background: rgba(59,42,163,.2) !important; transform: none !important; }
html body:not(#_) :is(.pop, .lightbox) :is(.round, .pop-x) { background: rgba(255,255,255,.16) !important; color: #fff !important; }
html body:not(#_) :is(.pop, .lightbox) :is(.round, .pop-x):hover { background: rgba(255,255,255,.28) !important; }
.pop.mini .pop-body { padding: 14px; }
/* libro Apericena autunnale nello stile della locandina */
.bk-poster .bk-c { background: #a9cf9a url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27200%27%20height%3D%27200%27%20viewBox%3D%270%200%20200%20200%27%3E%3Crect%20width%3D%27200%27%20height%3D%27200%27%20fill%3D%27%23a9cf9a%27/%3E%3Cpath%20fill%3D%27%23e8e0d2%27%20d%3D%27M-3%20-4%20Q25%20-4%2047%20-4%20L51%2054%20Q25%2056%203%2047Z%20M100%20-2%20Q125%20-6%20146%20-3%20L156%2053%20Q125%2056%20103%2047Z%20M48%2051%20Q75%2049%20104%2054%20L98%20101%20Q75%20105%2050%2097Z%20M150%2046%20Q175%2051%20204%2050%20L200%20104%20Q175%20104%20154%20103Z%20M0%2099%20Q25%2098%2049%2097%20L50%20153%20Q25%20148%20-5%20151Z%20M98%20100%20Q125%2097%20148%20105%20L149%20149%20Q125%20150%20101%20148Z%20M49%20152%20Q75%20145%20101%20154%20L98%20196%20Q75%20200%2053%20201Z%20M147%20148%20Q175%20144%20200%20145%20L204%20204%20Q175%20208%20152%20205Z%27/%3E%3C/svg%3E") 0 0 / calc(var(--bw) * .62) auto; color: #4a7d47; display: block; overflow: hidden; padding: calc(var(--bw) * .1) calc(var(--bw) * .09) 0 calc(var(--bw) * .14); }
.bk-poster .bk-c::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 8px 0 0 rgba(0,0,0,.14), inset 10px 0 0 rgba(255,255,255,.18); pointer-events: none; }
.pz-k { display: block; font: 400 calc(var(--bw) * .085)/1 "Anton", "Bebas Neue", Impact, sans-serif; color: #ef6f22; text-transform: uppercase; letter-spacing: .01em; }
.pz-t { display: block; margin-top: 4%; font: 400 calc(var(--bw) * .175)/.94 "Anton", "Bebas Neue", Impact, sans-serif; color: #4a7d47; text-transform: uppercase; overflow-wrap: anywhere; }
.pz-d { position: absolute; left: calc(var(--bw) * .14); bottom: calc(var(--bw) * .07); z-index: 2; font: 400 calc(var(--bw) * .085)/1 "Anton", Impact, sans-serif; color: #ef6f22; text-transform: uppercase; letter-spacing: .02em; }
.pz-img { position: absolute; right: -14%; bottom: 13%; width: 92%; height: auto; max-width: none; filter: drop-shadow(0 4px 6px rgba(60,40,0,.25)); transition: transform .5s var(--spring); }
.bk-poster:hover .pz-img { transform: rotate(-6deg) scale(1.05); }
/* ===== Swipe per entrare (hero) ===== */
.swipe { --x: 0px; --f: 0; position: relative; display: flex; align-items: center; justify-self: start; width: min(100%, 340px); height: 64px; padding: 6px; box-sizing: border-box; border-radius: 999px; background: var(--indigo); color: #fff; text-decoration: none; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; box-shadow: 0 6px 0 rgba(29,20,96,.22), 0 18px 30px -16px rgba(29,20,96,.6); animation: sw-in .8s var(--spring) .3s both; z-index: 2; }
@keyframes sw-in { from { opacity: 0; transform: translateY(16px) scale(.92); } }
.sw-fill { position: absolute; inset: 0; width: calc(var(--x) + 64px); background: #5442c4; border-radius: 999px; transition: width .45s var(--spring); }
.swipe.drag .sw-fill { transition: none; }
.sw-txt { position: relative; flex: 1; padding-left: 64px; font: 700 1.02rem var(--font); letter-spacing: .01em; white-space: nowrap; opacity: calc(1 - var(--f) * 1.4);
background: linear-gradient(100deg, #fff 40%, #f5d76e 50%, #fff 60%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sw-shine 2.6s linear infinite; }
.sw-txt b { font-weight: 800; }
@keyframes sw-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.sw-arr svg { width: 30px; height: 14px; display: block; }
.sw-arr { position: relative; padding-right: 16px; display: grid; color: rgba(255,255,255,.55); opacity: calc(1 - var(--f) * 1.6); animation: sw-arr 1.4s ease-in-out infinite; }
@keyframes sw-arr { 50% { transform: translateX(5px); color: #fff; } }
.sw-knob { position: absolute; left: 6px; top: 6px; width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; cursor: grab; transform: translateX(var(--x)) rotate(calc(var(--f) * 360deg)); transition: transform .45s var(--spring); box-shadow: 0 4px 10px rgba(0,0,0,.2); touch-action: none; }
.sw-knob svg { width: 34px; height: 34px; }
.swipe.drag .sw-knob { transition: none; cursor: grabbing; }
.swipe:not(.drag):not(.done) .sw-knob { animation: sw-hint 3.2s ease-in-out 1.4s infinite; }
@keyframes sw-hint { 0%, 70%, 100% { translate: 0 0; } 78% { translate: 26px 0; } 86% { translate: 0 0; } 92% { translate: 10px 0; } }
.swipe.nudge .sw-knob { animation: sw-nudge .6s var(--spring); }
@keyframes sw-nudge { 40% { translate: 60px 0; } }
.swipe.done { animation: sw-done .5s ease both; }
@keyframes sw-done { to { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(84,66,196,.25); } }
.f-hero .swipe { margin-bottom: 4px; }
/* ===== Pagina Bake Off ===== */
.bake { --pinkb: #f4a3c4; --choc: #4a2a22; position: relative; min-height: 100vh; background: linear-gradient(180deg, #e4dcfb 0%, #f3d9e8 55%, #e4dcfb 100%); color: var(--ink); overflow: hidden; overflow: clip; padding-bottom: 60px; }
.bk-drip { position: absolute; top: 0; left: 0; width: 100%; height: 90px; fill: var(--pinkb); z-index: 1; }
.bk-sprinkles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.bk-sprinkles i { position: absolute; top: -20px; width: var(--w); height: 5px; border-radius: 3px; background: var(--c); opacity: .85; animation: bk-fall var(--d) linear var(--del) infinite; }
@keyframes bk-fall { from { transform: translateY(-20px) rotate(var(--r)); } to { transform: translateY(110vh) rotate(calc(var(--r) + 540deg)); } }
.bk-wrap { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 96px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 16px; }
.bk-back { justify-self: start; }
.bk-hero { position: relative; display: grid; gap: 10px; padding: 8px 0 0; }
.bk-kick { font: 700 1.5rem var(--hand); color: var(--indigo); transform: rotate(-4deg); justify-self: start; }
.bk-hero h1 { margin: 0; font-family: var(--display) !important; font-weight: 400 !important; font-size: clamp(4rem, 20vw, 7.5rem) !important; line-height: .85 !important; color: var(--ink) !important; letter-spacing: -.01em; }
.bk-hero h1 em { font-style: normal; color: #e0477f; display: inline-block; animation: bk-wob 2.4s ease-in-out infinite; }
@keyframes bk-wob { 50% { transform: rotate(-5deg) translateY(-4px); } }
.bk-hero p { margin: 0; max-width: 30ch; font: 500 1.1rem/1.45 var(--font); }
.bk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-chips span { background: #fff; border-radius: 999px; padding: 7px 14px; font: 700 .85rem var(--font); color: var(--indigo); }
.bk-cake { width: min(62%, 240px); justify-self: end; margin-top: -20px; animation: bk-float 4s ease-in-out infinite; }
@keyframes bk-float { 50% { transform: translateY(-8px) rotate(2deg); } }
.bk-flame { transform-origin: 110px 32px; animation: bk-flame .5s ease-in-out infinite alternate; }
@keyframes bk-flame { to { transform: scale(.85, 1.12) rotate(4deg); } }
.bk-spr rect { animation: bk-twinkle 2s ease-in-out infinite alternate; } .bk-spr rect:nth-child(even) { animation-delay: -1s; }
@keyframes bk-twinkle { to { opacity: .4; } }
.bk-card { background: rgba(255,255,255,.88); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 26px; padding: 20px 18px; box-shadow: 0 20px 40px -26px rgba(29,20,96,.45); }
.bk-card h2 { margin: 0 0 10px; font-family: var(--display) !important; font-weight: 400 !important; font-size: 2rem !important; color: var(--ink) !important; display: grid; gap: 2px; }
.bk-card h2 small { font: 500 .92rem var(--font); color: rgba(29,20,96,.6); }
.bk-card h3 { margin: 14px 0 6px; font: 800 .8rem var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--indigo); }
.bk-prog { position: sticky; top: 10px; z-index: 5; display: grid; gap: 8px; padding: 14px 18px; }
.bk-prog > div:first-child { font: 600 .95rem var(--font); } .bk-prog b { font: 400 1.4rem var(--display); color: var(--indigo); margin-right: 4px; }
.bk-bar { height: 12px; border-radius: 999px; background: #efe9fd; overflow: hidden; }
.bk-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: repeating-linear-gradient(-45deg, #e0477f 0 8px, #f4a3c4 8px 16px); background-size: 22px 22px; transition: width .6s var(--spring); animation: bk-stripes 1s linear infinite; }
@keyframes bk-stripes { to { background-position: 22px 0; } }
.bk-prog p { margin: 0; font: 500 .9rem var(--font); color: rgba(29,20,96,.7); }
.bk-ing { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bk-chk, .bk-step { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bk-chk { padding: 10px 12px; border-radius: 14px; background: #f6f2ff; font: 600 1rem var(--font); color: var(--ink); transition: background .2s, transform .25s var(--spring); }
.bk-chk:active, .bk-step:active { transform: scale(.98); }
.bk-box { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid #c3b5ef; display: grid; place-items: center; color: #fff; background: #fff; transition: background .25s, border-color .25s, transform .4s var(--spring); }
.bk-box svg { width: 16px; height: 16px; transform: scale(0); transition: transform .35s var(--spring); }
.on > .bk-box, .on .bk-box, .bk-chk.on .bk-box { background: #e0477f; border-color: #e0477f; transform: rotate(-8deg) scale(1.08); }
.on .bk-box svg, .bk-chk.on .bk-box svg { transform: scale(1); }
.bk-chk.on { background: #fde6ef; } .bk-chk.on span:last-child { text-decoration: line-through; text-decoration-color: rgba(224,71,127,.6); text-decoration-thickness: 2px; }
.bk-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bk-steps li { border-radius: 18px; background: #f6f2ff; transition: background .3s; }
.bk-steps li.on { background: #fde6ef; }
.bk-step { padding: 14px; align-items: flex-start; }
.bk-num { flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--indigo); color: #fff; display: grid; place-items: center; font: 400 1.15rem var(--display); transition: background .3s; }
.bk-steps li.on .bk-num { background: #e0477f; }
.bk-st { flex: 1; min-width: 0; display: grid; gap: 3px; } .bk-st b { font: 800 1.05rem var(--font); color: var(--ink); } .bk-st span { font: 500 .95rem/1.45 var(--font); color: rgba(29,20,96,.78); }
.bk-steps li.on .bk-st { opacity: .6; } .bk-steps li.on .bk-st b { text-decoration: line-through; text-decoration-color: #e0477f; text-decoration-thickness: 2px; }
.bk-step .bk-box { margin-top: 4px; }
.bk-reset { justify-self: center; margin-top: 14px; }
.bk-card:has(.bk-reset) { display: grid; }
.bake.in .bk-wrap > * { animation: bk-up .7s var(--spring) both; }
.bake.in .bk-wrap > *:nth-child(2) { animation-delay: .08s; } .bake.in .bk-wrap > *:nth-child(3) { animation-delay: .16s; } .bake.in .bk-wrap > *:nth-child(4) { animation-delay: .24s; } .bake.in .bk-wrap > *:nth-child(5) { animation-delay: .32s; }
@keyframes bk-up { from { opacity: 0; transform: translateY(26px); } }
.bake.in .bk-drip { animation: bk-drip 1s cubic-bezier(.22,1,.36,1) both; transform-origin: top; }
@keyframes bk-drip { from { transform: scaleY(0); } }
.bk-done { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; pointer-events: none; }
.bk-done > div { display: grid; gap: 4px; text-align: center; background: var(--indigo); color: #fff; padding: 24px 30px; border-radius: 28px; box-shadow: 0 30px 60px -20px rgba(29,20,96,.7); }
.bk-done b { font: 400 2.2rem var(--display); } .bk-done span { font: 500 1rem var(--font); }
.bk-done.go > div { animation: bk-pop 3.2s var(--spring) both; }
@keyframes bk-pop { 0% { transform: scale(.4); opacity: 0; } 12% { transform: scale(1); opacity: 1; } 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9); opacity: 0; } }
.bk-burst { position: fixed; left: 50%; top: 50%; z-index: 81; pointer-events: none; }
.bk-burst i { position: absolute; width: 12px; height: 5px; border-radius: 3px; background: var(--c); animation: bk-burst 1.4s cubic-bezier(.2,.8,.3,1) both; }
@keyframes bk-burst { to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }
@media (min-width: 760px) { .bk-hero { grid-template-columns: 1fr 240px; } .bk-hero > :not(.bk-cake) { grid-column: 1; } .bk-cake { grid-column: 2; grid-row: 1 / 6; align-self: center; width: 100%; margin: 0; } }
@media (prefers-reduced-motion: reduce) { .bk-sprinkles { display: none; } }
/* hero del giorno attività */
.f-hero .hero-spr { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.hero-spr i { position: absolute; top: -20px; width: var(--w); height: 5px; border-radius: 3px; background: var(--c); opacity: .75; animation: bk-fall var(--d) linear var(--del) infinite; }
.f-hero > :not(.blobs):not(.hero-spr) { position: relative; z-index: 1; }
.live-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--indigo); border-radius: 999px; padding: 8px 16px 8px 12px; font: 800 .85rem var(--font); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 4px 0 rgba(29,20,96,.12); animation: sw-in .7s var(--spring) .1s both; }
.live-chip i { width: 10px; height: 10px; border-radius: 50%; background: #e0477f; box-shadow: 0 0 0 0 rgba(224,71,127,.6); animation: live 1.6s ease-out infinite; }
@keyframes live { to { box-shadow: 0 0 0 10px rgba(224,71,127,0); } }
.poster-head h2 .hl { font-style: normal; color: #e0477f; display: inline-block; animation: bk-wob 2.4s ease-in-out infinite; transform-origin: 30% 80%; }
.f-hero .swipe { width: min(100%, 380px); height: 70px; margin-top: 4px; }
.f-hero .swipe .sw-knob { width: 58px; height: 58px; }
.f-hero .swipe .sw-txt { padding-left: 72px; font-size: 1.08rem; }
.f-hero .swipe .sw-fill { width: calc(var(--x) + 70px); }
html body:not(#_) .hero-past { padding: 10px 20px !important; font-size: .95rem !important; }
html body:not(#_) .badge .cup { display: grid !important; place-items: center; } html body:not(#_) .badge .cup svg { position: static !important; inset: auto !important; width: 60% !important; height: 60% !important; transform: none; animation: bk-wob 2.4s ease-in-out infinite; }
html body:not(#_) .f-hero :is(.live-chip, .hero-past) { justify-self: start !important; width: max-content !important; max-width: 100%; }
html:has(body.bake-mode), html body.bake-mode:not(#_), html body.bake-mode:not(#_) header.top { background: #f4a3c4 !important; box-shadow: none !important; }
html body.bake-mode:not(#_) .bake { margin-top: -1px; }
.sw-knob svg.cupk { width: 44px; height: 44px; margin-top: -3px; }
.cupk-cherry { transform-origin: 31px 18px; animation: cherry 1.8s ease-in-out infinite; }
@keyframes cherry { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-14deg); } 80% { transform: rotate(10deg); } 90% { transform: rotate(-5deg); } }
.swipe.drag .cupk-cherry { animation-duration: .5s; }
/* recap Apericena autunnale nello stile della locandina */
html body:not(#_) .sheet-card.pz-theme { background: #e9e2d4 !important; border: 0 !important; }
html body:not(#_) .pz-theme .sheet-top { background: transparent !important; }
html body:not(#_) .pz-theme .eyebrow { font: 400 1rem/1 "Anton", Impact, sans-serif !important; letter-spacing: .04em !important; color: #ef6f22 !important; text-transform: uppercase; }
html body:not(#_) .pz-theme .round { background: #a9cf9a !important; color: #3f6e3d !important; border: 0 !important; box-shadow: none !important; outline-color: #ef6f22; }
html body:not(#_) .pz-theme .recap-head { background: #a9cf9a url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27200%27%20height%3D%27200%27%20viewBox%3D%270%200%20200%20200%27%3E%3Crect%20width%3D%27200%27%20height%3D%27200%27%20fill%3D%27%23a9cf9a%27/%3E%3Cpath%20fill%3D%27%23e8e0d2%27%20d%3D%27M-3%20-4%20Q25%20-4%2047%20-4%20L51%2054%20Q25%2056%203%2047Z%20M100%20-2%20Q125%20-6%20146%20-3%20L156%2053%20Q125%2056%20103%2047Z%20M48%2051%20Q75%2049%20104%2054%20L98%20101%20Q75%20105%2050%2097Z%20M150%2046%20Q175%2051%20204%2050%20L200%20104%20Q175%20104%20154%20103Z%20M0%2099%20Q25%2098%2049%2097%20L50%20153%20Q25%20148%20-5%20151Z%20M98%20100%20Q125%2097%20148%20105%20L149%20149%20Q125%20150%20101%20148Z%20M49%20152%20Q75%20145%20101%20154%20L98%20196%20Q75%20200%2053%20201Z%20M147%20148%20Q175%20144%20200%20145%20L204%20204%20Q175%20208%20152%20205Z%27/%3E%3C/svg%3E") 0 0 / 220px auto !important; padding: 0 !important; display: block !important; height: auto !important; min-height: 0 !important; overflow: hidden; position: relative; }
.pz-head { position: relative; aspect-ratio: 4 / 5; max-height: 72vh; width: 100%; padding: 8% 8% 0; box-sizing: border-box; color: #4a7d47; font-family: "Anton", "Bebas Neue", Impact, sans-serif; text-transform: uppercase; }
.pz-head .pz-k { display: block; font-size: clamp(1.1rem, 5vw, 1.6rem); color: #ef6f22; line-height: 1; }
.pz-head .pz-t { display: block; margin-top: 3%; font-size: clamp(2.6rem, 14vw, 4.6rem); line-height: .9; color: #4a7d47; max-width: 9ch; }
.pz-head .pz-when { position: relative; z-index: 2; display: block; margin-top: 6%; font-size: clamp(1.5rem, 8vw, 2.6rem); line-height: .95; color: #4a7d47; mix-blend-mode: multiply; }
.pz-head .pz-img { position: absolute; right: -4%; top: 40%; width: 66%; max-width: none; height: auto; z-index: 1; filter: drop-shadow(0 8px 12px rgba(60,40,0,.25)); animation: pz-float 5s ease-in-out infinite; }
@keyframes pz-float { 50% { transform: translateY(-8px) rotate(-3deg); } }
.pz-head .pz-addr { position: absolute; left: 8%; right: 8%; bottom: 5%; display: flex; justify-content: space-between; gap: 10px; font-size: clamp(1rem, 4.6vw, 1.5rem); color: #ef6f22; line-height: 1; z-index: 2; }
html body:not(#_) .pz-theme .recap-body { background: #e9e2d4 !important; }
html body:not(#_) .pz-theme .recap-body h2 { display: none; }
html body:not(#_) .pz-theme .recap-text p { color: #3d5f3b !important; }
html body:not(#_) .pz-theme .soon { border: 2px dashed rgba(74,125,71,.45) !important; color: #4a7d47 !important; background: rgba(169,207,154,.25) !important; font-weight: 600; }
/* ===== VERSIONE BROWSER (desktop) ===== */
.hero-art { display: none; }
@media (min-width: 960px) {
html body:not(#_):not(#_) .f-hero { --gut: max(56px, calc((100vw - 1240px) / 2)); min-height: min(calc(100vh - 80px), 760px); padding: 50px var(--gut) 110px !important; display: grid !important; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); column-gap: 56px; row-gap: 18px; align-content: center !important; justify-items: start; }
html body:not(#_):not(#_) .f-hero > :not(.blobs):not(.hero-spr):not(.hero-art):not(.badge) { grid-column: 1; }
html body:not(#_):not(#_) .f-hero .poster-head h2 { font-size: clamp(3.6rem, 4.9vw, 5.8rem) !important; line-height: .92 !important; margin: 0 0 6px !important; }
html body:not(#_):not(#_) .f-hero .poster-head { transform: none !important; margin: 0 !important; }
html body:not(#_):not(#_) .f-hero .f-sub { max-width: 34ch; font-size: 1.25rem; margin: 0 0 14px !important; }
html body:not(#_):not(#_) .f-hero > :is(.live-chip, .poster-head, .f-sub, .hero-past) { transform: none !important; translate: none !important; }
html body:not(#_):not(#_) .f-hero .swipe { width: 440px !important; max-width: 100%; justify-self: start !important; }
.hero-art { display: grid; place-items: center; grid-column: 2; grid-row: 1 / span 6; align-self: center; position: relative; width: 100%; aspect-ratio: 1; z-index: 1; }
.hero-art::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: #fff; opacity: .45; }
.hero-cake { position: relative; width: 78%; justify-self: center; margin: 0; animation: bk-float 4s ease-in-out infinite; }
html body:not(#_):not(#_) .f-hero > .badge { position: absolute !important; left: auto !important; top: auto !important; right: calc(var(--gut) + 2%) !important; bottom: 14% !important; width: 170px !important; height: 170px !important; z-index: 3; margin: 0 !important; }
/* come funziona */
html body:not(#_):not(#_) .f-how { padding: 90px var(--gut, 56px) 110px !important; }
html body:not(#_):not(#_) .how-card { max-width: 1180px !important; width: 100% !important; margin: 0 auto !important; padding: 56px 56px 80px !important; overflow: visible !important; box-sizing: border-box; }
html body:not(#_):not(#_) .how-card .steps { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 26px !important; overflow: visible !important; margin: 30px 0 0 !important; padding: 0 !important; }
html body:not(#_):not(#_) .how-card .step { width: auto !important; min-width: 0 !important; max-width: none !important; }
/* lista attività */
html body:not(#_):not(#_) .f-list { padding: 120px var(--gut, 56px) 140px !important; position: relative; }
html body:not(#_):not(#_) .f-list > .badge { position: absolute !important; left: auto !important; right: max(56px, calc((100vw - 1240px) / 2)) !important; top: 50% !important; bottom: auto !important; margin: -85px 0 0 !important; width: 170px !important; height: 170px !important; }
/* libreria */
html body:not(#_):not(#_) .f-past { padding: 60px 56px 40px !important; }
html body:not(#_):not(#_) .f-past .past-card { max-width: 1100px !important; width: 100% !important; margin: 0 auto !important; padding: 56px 56px 48px !important; box-sizing: border-box; }
/* faq */
html body:not(#_):not(#_) .f-faq { max-width: 820px !important; margin: 0 auto !important; padding: 60px 24px 80px !important; display: grid !important; gap: 12px !important; }
html body:not(#_):not(#_) .f-faq details { width: 100% !important; max-width: none !important; margin: 0 !important; transform: none !important; translate: none !important; rotate: none !important; justify-self: stretch !important; box-sizing: border-box; }
html body:not(#_):not(#_) .f-faq h2 { margin-bottom: 18px !important; text-align: center; }
/* footer */
html body:not(#_):not(#_) .f-foot { display: grid !important; justify-items: center !important; align-content: center !important; gap: 16px !important; padding: 120px 24px 80px !important; }
html body:not(#_):not(#_) .f-foot .hand { position: static !important; margin: 4px 0 0 !important; transform: rotate(-4deg) !important; translate: none !important; }
html body:not(#_):not(#_) .f-foot .f-logo { transform: none !important; translate: none !important; }
html body:not(#_):not(#_) .f-foot .f-logo { margin: 0 !important; font-size: clamp(4rem, 7vw, 6.4rem) !important; line-height: 1 !important; }
}
@media (min-width: 960px) {
.bk-wrap { max-width: 1120px; padding-top: 110px; gap: 22px; }
.bk-hero { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 40px; }
.bk-hero h1 { font-size: clamp(5.5rem, 9vw, 9rem) !important; white-space: nowrap; }
.bk-hero p { font-size: 1.25rem; max-width: 34ch; }
.bk-cake { width: 100% !important; }
.bk-card { padding: 28px 30px; }
.bk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.bk-steps li { display: grid; }
.bk-prog { grid-template-columns: auto 1fr; align-items: center; column-gap: 24px; }
.bk-prog p { grid-column: 1 / -1; }
}
/* desktop v2: meno margini, testi più grandi */
@media (min-width: 960px) {
html body:not(#_):not(#_) .f-hero { --gut: clamp(32px, 4.5vw, 96px); padding: 30px var(--gut) 90px !important; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: 24px; row-gap: 22px; }
html body:not(#_):not(#_) .f-hero .poster-head h2 { font-size: clamp(4.5rem, 7.4vw, 9rem) !important; }
html body:not(#_):not(#_) .f-hero .f-sub { font-size: clamp(1.3rem, 1.6vw, 1.75rem) !important; max-width: 36ch; line-height: 1.4; }
html body:not(#_):not(#_) .f-hero .live-chip { font-size: 1.05rem; padding: 11px 22px 11px 16px; }
html body:not(#_):not(#_) .f-hero .live-chip i { width: 13px; height: 13px; }
html body:not(#_):not(#_) .f-hero .swipe { width: clamp(440px, 36vw, 620px) !important; height: 84px; padding: 8px; }
html body:not(#_):not(#_) .f-hero .swipe .sw-knob { width: 68px; height: 68px; left: 8px; top: 8px; }
html body:not(#_):not(#_) .f-hero .swipe .sw-knob svg.cupk { width: 54px; height: 54px; }
html body:not(#_):not(#_) .f-hero .swipe .sw-txt { padding-left: 88px; font-size: clamp(1.15rem, 1.5vw, 1.5rem); }
html body:not(#_):not(#_) .f-hero .swipe .sw-fill { width: calc(var(--x) + 84px); }
html body:not(#_):not(#_) .f-hero .swipe .sw-arr svg { width: 40px; height: 18px; }
html body:not(#_):not(#_) .f-hero .hero-past { font-size: 1.1rem !important; padding: 13px 26px !important; }
html body:not(#_):not(#_) .hero-art { width: 100%; max-width: 640px; justify-self: center; }
html body:not(#_):not(#_) .f-hero > .badge { right: auto !important; bottom: auto !important; left: calc(100% - var(--gut) - min(40vw, 640px) * .5 - 85px) !important; top: 4% !important; width: 190px !important; height: 190px !important; }
html body:not(#_):not(#_) header.top, html body:not(#_):not(#_) .top { padding-left: clamp(32px, 4.5vw, 96px) !important; padding-right: clamp(32px, 4.5vw, 96px) !important; max-width: none !important; }
html body:not(#_):not(#_) .logo { font-size: clamp(2rem, 2.4vw, 2.8rem) !important; }
html body:not(#_):not(#_) .burger { font-size: 1.2rem !important; padding: 15px 32px !important; }
}
/* desktop v3 */
.hero-art { display: contents; } .hero-art .hero-cake { display: none; }
@media (min-width: 960px) {
html body:not(#_):not(#_) .hero-art { display: grid !important; width: min(100%, 620px) !important; height: auto !important; aspect-ratio: 1; justify-self: center; position: relative; }
html body:not(#_):not(#_) .hero-art .hero-cake { display: block; width: 78% !important; }
html body:not(#_):not(#_) .hero-art > .badge { position: absolute !important; left: -2% !important; top: 0 !important; right: auto !important; bottom: auto !important; width: 31% !important; height: 31% !important; margin: 0 !important; z-index: 3; transform: none; }
html body:not(#_):not(#_) header.top > * { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
}
/* codette su tutto il sito: più fitte in alto */
.home { position: relative; }
.page-spr { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.page-spr i { position: absolute; width: var(--w); height: 5px; border-radius: 3px; background: var(--c); opacity: 0; animation: pg-fall var(--d) linear var(--del) infinite; }
@keyframes pg-fall { 0% { transform: translateY(-40vh) rotate(var(--r)); opacity: 0; } 15% { opacity: calc(var(--o) * .85); } 80% { opacity: calc(var(--o) * .85); } 100% { transform: translateY(40vh) rotate(calc(var(--r) + 420deg)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .page-spr { display: none; } }
@media (min-width: 960px) {
html body:not(#_):not(#_) .f-hero > :is(.live-chip, .swipe, .hero-past, .poster-head, .f-sub) { margin-left: 0 !important; margin-right: 0 !important; justify-self: start !important; }
html body:not(#_):not(#_) .hero-art > .badge { left: auto !important; right: 2% !important; top: 3% !important; width: 21% !important; height: 21% !important; }
html body:not(#_):not(#_) .f-foot { min-height: 560px !important; position: relative; overflow: hidden; }
html body:not(#_):not(#_) .f-foot .swoosh { display: block !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 0; }
}
/* tendina menu v2 */
html body:not(#_) .pop.mini .pop-panel { top: var(--mt, 80px) !important; right: var(--mr, 16px) !important; width: 270px; border-radius: 26px; overflow: visible; transform-origin: calc(100% - var(--mx, 40px)) -10px; box-shadow: 0 26px 50px -20px rgba(29,20,96,.65), 0 0 0 1px rgba(255,255,255,.08) inset; }
html body:not(#_) .pop.mini .pop-panel::before { content: ""; position: absolute; top: -8px; right: calc(var(--mx, 40px) - 9px); width: 18px; height: 18px; background: var(--indigo); border-radius: 4px; transform: rotate(45deg); }
.pop.mini .pop-blobs { border-radius: 26px; }
html body:not(#_) .pop.mini .pop-body { padding: 18px 16px 16px; gap: 10px; justify-items: stretch; }
.mini-cap { font: 700 1.25rem/1 var(--hand); color: #c3b5ef; transform: rotate(-3deg); justify-self: start; padding-left: 4px; }
.pop:not(.mini) .mini-cap { display: none; }
html body:not(#_) .pop.mini #to-staff { width: 100%; justify-content: space-between; padding: 12px 14px 12px 12px !important; gap: 10px; border-radius: 18px !important; }
html body:not(#_) .pop #to-staff .lk { display: grid !important; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: #efe9fd !important; color: var(--indigo) !important; flex: none; }
html body:not(#_) .pop #to-staff .lk svg { width: 18px; height: 18px; }
html body:not(#_) .pop #to-staff span:nth-child(2) { flex: 1; text-align: left; }
.pop.mini.open .pop-panel { animation: mini-in2 .55s cubic-bezier(.2,1.4,.4,1) both !important; }
@keyframes mini-in2 { from { opacity: 0; transform: translateY(-12px) scale(.5); } }
.pop.mini .pop-body.in > * { animation-delay: calc(.12s + var(--k, 0) * .07s) !important; }
.pop.grow .pop-panel { animation: none !important; }
.pop-body.in > * { animation-delay: calc(var(--d0, .14s) + var(--k, 0) * .055s) !important; }
.pop-top.in > * { animation-delay: var(--d0, .2s) !important; }
@media (min-width: 960px) {
html body:not(#_) .pop-login h2 { font-size: clamp(4rem, 6vw, 6rem) !important; }
html body:not(#_) .pop-login p { font-size: 1.2rem; }
html body:not(#_) .pop .pf { width: min(100%, 440px); }
html body:not(#_) .pop .pf input { font-size: 1.2rem; padding: 20px 60px 20px 28px; }
html body:not(#_) .pop-login .pmain { font-size: 1.2rem !important; padding: 16px 42px !important; }
html body:not(#_) .pop-login .pback { font-size: 1.05rem !important; }
html body:not(#_) .pop-logo { font-size: 2rem; }
html body:not(#_) .pop-top { padding: 22px 26px 0 32px; }
}
.pop-burst { position: fixed; z-index: 89; border-radius: 50%; background: var(--indigo); pointer-events: none; transform: scale(.02); will-change: transform; }
html.pop-lock .page-spr i, html.pop-lock .hero-spr i { animation-play-state: paused; }
.pop.grow .pop-panel { animation: none !important; }
/* Come funziona su telefono: schede impilate, niente tagli */
@media (max-width: 959px) {
html body:not(#_):not(#_) .how-card .steps { display: grid !important; grid-template-columns: 1fr !important; grid-auto-flow: row !important; grid-auto-columns: auto !important; gap: 14px !important; overflow: visible !important; margin: 18px 0 0 !important; padding: 0 !important; scroll-snap-type: none !important; }
html body:not(#_):not(#_) .how-card .step { width: auto !important; min-width: 0 !important; max-width: none !important; flex: none !important; transform: rotate(-1.2deg) !important; }
html body:not(#_):not(#_) .how-card .step:nth-child(2) { transform: rotate(1.2deg) !important; }
html body:not(#_):not(#_) .how-card .step svg { max-width: 120px; }
}
.pop.fade { pointer-events: none; }
.pop.fade .pop-panel { animation: none !important; }
/* bottoni login / conferma: stessa misura */
html body:not(#_):not(#_) :is(.pop-login, .bye-act) .pback { display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box; width: 230px !important; height: 52px !important; padding: 0 20px !important; font: 700 1.05rem/1 var(--font) !important; margin: 0 !important; }
@media (min-width: 960px) { html body:not(#_):not(#_) :is(.pop-login, .bye-act) .pback { width: 260px !important; height: 58px !important; font-size: 1.15rem !important; } }
html body:not(#_):not(#_) .pop-login .pmain { margin-top: 6px !important; }
/* telefono: spazi tra sezioni più compatti */
@media (max-width: 959px) {
html body:not(#_):not(#_) .f-hero { min-height: 0 !important; padding-top: 90px !important; padding-bottom: 118px !important; }
html body:not(#_):not(#_) .f-hero .badge { bottom: 6px !important; top: auto !important; right: 14px !important; left: auto !important; width: 108px !important; height: 108px !important; translate: none !important; }
html body:not(#_):not(#_) .f-how .how-card { transform: translateY(calc((1 - var(--e)) * 24px)) scale(calc(.97 + var(--e) * .03)) !important; }
html body:not(#_):not(#_) .f-how { padding-top: 0 !important; padding-bottom: 36px !important; margin-top: 0 !important; }
html body:not(#_):not(#_) .f-list { padding-top: 96px !important; padding-bottom: 96px !important; margin-top: 0 !important; display: grid !important; justify-items: center !important; align-content: center !important; gap: 26px !important; }
html body:not(#_):not(#_) .f-list .big-list { margin: 0 !important; text-align: center !important; justify-items: center; width: 100%; }
html body:not(#_):not(#_) .f-list > .badge { position: relative !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; margin: 0 !important; width: 116px !important; height: 116px !important; translate: none !important; justify-self: center !important; }
html body:not(#_):not(#_) .f-past { padding-top: 8px !important; margin-top: 0 !important; }
html body:not(#_):not(#_) .f-list { margin-bottom: 0 !important; }
html body:not(#_):not(#_) .past-card { transform: translateY(calc((1 - var(--e)) * 20px)) !important; }
html body:not(#_):not(#_) .f-faq { padding-bottom: 10px !important; }
html body:not(#_):not(#_) .f-foot { min-height: 440px !important; padding-top: 70px !important; margin-top: 0 !important; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pop-body:has(#to-staff[hidden]) .mini-cap { display: none !important; }
html body:not(#_) .badge .duo { display: grid !important; place-items: center; }
html body:not(#_) .badge .duo svg { position: static !important; inset: auto !important; width: 66% !important; height: 66% !important; transform: none; animation: bk-wob 2.6s ease-in-out infinite; }
.duo-h { transform-origin: 33px 14px; animation: duo-beat 1.4s ease-in-out infinite; }
@keyframes duo-beat { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.3); } 80% { transform: scale(.95); } }
/* knob = biscotto */
html body:not(#_):not(#_) .sw-knob { background: transparent !important; box-shadow: none !important; filter: drop-shadow(0 4px 6px rgba(29,20,96,.35)); }
html body:not(#_):not(#_) .sw-knob svg.cookie { width: 100% !important; height: 100% !important; margin: 0 !important; display: block; }
/* hint del biscotto: si muove anche lo sfondo */
@property --x { syntax: ""; inherits: true; initial-value: 0px; }
@property --f { syntax: ""; inherits: true; initial-value: 0; }
html body:not(#_) .swipe:not(.drag):not(.done) .sw-knob { animation: none !important; }
html body:not(#_) .swipe:not(.drag):not(.done):not(.nudge) { animation: sw-in .8s var(--spring) .3s both, sw-hint2 3.2s ease-in-out 1.6s infinite; }
@keyframes sw-hint2 { 0%, 70%, 100% { --x: 0px; --f: 0; } 78% { --x: 30px; --f: .1; } 86% { --x: 0px; --f: 0; } 92% { --x: 12px; --f: .04; } }
html body:not(#_) .swipe.nudge { animation: sw-nudge2 .6s cubic-bezier(.34,1.56,.64,1); }
html body:not(#_) .swipe.nudge .sw-knob { animation: none !important; }
@keyframes sw-nudge2 { 40% { --x: 64px; --f: .22; } }
html body:not(#_) .swipe .sw-fill, html body:not(#_) .swipe .sw-knob { transition: none !important; }
html body:not(#_) .swipe { transition: --x .45s cubic-bezier(.34,1.56,.64,1), --f .45s cubic-bezier(.34,1.56,.64,1); }
html body:not(#_) .swipe.drag { transition: none; }
/* ================= URBAN ESCAPE (stile videogioco 8-bit) ================= */
:root { --px: "Press Start 2P", "Courier New", monospace; --pxs: "Pixelify Sans", "Press Start 2P", system-ui, sans-serif; --sky: #66a6f8; --pxink: #1d1a33; }
body:has(#public:not([hidden]) .u-day:not([hidden])) header.top, html:has(#public:not([hidden]) .u-day:not([hidden])), body.urban-mode header.top, html:has(body.urban-mode) { background: var(--sky) !important; box-shadow: none !important; }
body:has(#public:not([hidden]) .u-day:not([hidden])) .logo, body.urban-mode .logo { color: #fff !important; text-shadow: 3px 3px 0 var(--pxink); }
body:has(#public:not([hidden]) .u-day:not([hidden])) .burger, body.urban-mode .burger { background: rgba(255,255,255,.28) !important; color: var(--pxink) !important; }
.home:has(.u-day:not([hidden])) .page-spr { display: none; }
html body:not(#_):not(#_):not(#_) .f-hero.u-day { position: relative; display: flex !important; flex-direction: column; align-items: center !important; text-align: center; gap: 14px; min-height: 0 !important; padding: 26px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)) !important; background: var(--sky) !important; overflow: hidden; color: var(--pxink); }
.u-day > * { position: relative; z-index: 2; }
.u-cloud { position: absolute !important; z-index: 1 !important; width: 90px; height: auto; opacity: .95; animation: u-drift 38s linear infinite; }
.u-cloud.c1 { top: 4%; left: -10%; } .u-cloud.c2 { top: 26%; left: 60%; width: 120px; animation-duration: 52s; animation-delay: -20s; } .u-cloud.c3 { top: 46%; left: 20%; width: 70px; animation-duration: 44s; animation-delay: -30s; }
@keyframes u-drift { from { translate: -30vw 0; } to { translate: 110vw 0; } }
.u-hud { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.u-p1, .u-score { display: inline-flex; align-items: center; gap: 10px; font: 400 .72rem/1 var(--px); color: #fff; text-transform: uppercase; text-shadow: 2px 2px 0 var(--pxink); }
.u-score b { font-weight: 400; color: #ffd23f; }
.u-hearts { display: inline-flex; gap: 3px; }
.u-hearts i { width: 18px; height: 16px; display: block; animation: u-heart 1.6s ease-in-out infinite; animation-delay: calc(var(--k) * .12s); }
.u-hearts svg { width: 100%; height: 100%; display: block; }
@keyframes u-heart { 50% { translate: 0 -2px; } }
.u-chip { font: 400 .62rem/1 var(--px); text-transform: uppercase; color: var(--pxink); background: #fff; padding: 9px 12px; box-shadow: 0 0 0 3px var(--pxink), 4px 4px 0 3px var(--pxink); margin-top: 8px; }
.u-title { margin: 6px 0 0 !important; font: 400 clamp(2.3rem, 11vw, 6.2rem)/1.05 var(--px) !important; letter-spacing: 0 !important; color: #ffd23f !important; text-transform: uppercase;
text-shadow: 3px 0 0 var(--pxink), -3px 0 0 var(--pxink), 0 3px 0 var(--pxink), 0 -3px 0 var(--pxink), 3px 3px 0 var(--pxink), -3px -3px 0 var(--pxink), 3px -3px 0 var(--pxink), -3px 3px 0 var(--pxink), 7px 7px 0 #8a3b12, 9px 9px 0 var(--pxink); }
.u-title span { display: block; }
.u-title span:last-child { animation: u-blinkin 1s steps(1) .6s both; }
@keyframes u-blinkin { 0% { opacity: 0; } 30% { opacity: 1; } 45% { opacity: 0; } 60% { opacity: 1; } }
.u-date { margin: 4px 0 0; white-space: nowrap; font: 400 clamp(.66rem, 3.05vw, 1.5rem)/1.4 var(--px); color: #fff; text-transform: uppercase; text-shadow: 2px 2px 0 var(--pxink), -2px -2px 0 var(--pxink), 2px -2px 0 var(--pxink), -2px 2px 0 var(--pxink); }
.u-sub { margin: 0; max-width: 32ch; font: 500 1.08rem/1.45 var(--pxs); color: var(--pxink); }
/* swipe pixel */
html body:not(#_):not(#_) .u-day .swipe.u-swipe { width: min(100%, 360px) !important; height: 66px !important; padding: 6px !important; border-radius: 0 !important; background: #e2452f !important; box-shadow: 0 0 0 4px var(--pxink), 6px 6px 0 4px var(--pxink) !important; margin: 10px 0 4px; justify-self: center !important; overflow: visible; }
html body:not(#_):not(#_) .u-swipe .sw-fill { border-radius: 0 !important; background: #f2735e !important; width: calc(var(--x) + 60px) !important; inset: 0 auto 0 0; }
html body:not(#_):not(#_) .u-swipe .sw-txt { padding-left: 66px !important; font: 400 .74rem/1 var(--px) !important; text-transform: uppercase; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: #fff !important; text-shadow: 2px 2px 0 var(--pxink); animation: u-blink 1.1s steps(1) infinite !important; }
@keyframes u-blink { 50% { opacity: .35; } }
html body:not(#_):not(#_) .u-swipe .sw-arr { font: 400 .8rem var(--px) !important; color: #ffd23f !important; letter-spacing: 2px; text-shadow: 2px 2px 0 var(--pxink); }
html body:not(#_):not(#_) .u-swipe .sw-knob { width: 54px !important; height: 54px !important; left: 6px !important; top: 6px !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; filter: drop-shadow(3px 3px 0 var(--pxink)); }
html body:not(#_):not(#_) .u-swipe .sw-knob svg.coin { width: 100% !important; height: 100% !important; display: block; animation: u-spin 1.2s steps(6) infinite; }
@keyframes u-spin { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.15); } }
html body:not(#_):not(#_) .u-past { font: 400 .62rem/1 var(--px); text-transform: uppercase; color: #fff; background: #4fb04a; padding: 12px 14px; text-decoration: none; box-shadow: 0 0 0 3px var(--pxink), 4px 4px 0 3px var(--pxink); margin-top: 14px; transition: transform .15s ease; }
.u-past:hover, .u-past:active { transform: translate(2px, 2px); }
.u-scene { position: relative; z-index: 1 !important; display: block; width: calc(100% + 2 * max(16px, env(safe-area-inset-left, 0px))); max-width: none; height: clamp(190px, 34vw, 430px); margin: 14px -16px 0; image-rendering: pixelated; }
.u-coin { animation: u-coin 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * .15s); }
@keyframes u-coin { 50% { transform: translateY(-3px); } }
@media (min-width: 960px) {
html body:not(#_):not(#_):not(#_) .f-hero.u-day { padding-top: 34px !important; gap: 18px; }
.u-title span { display: inline; }
.u-p1, .u-score { font-size: 1rem; } .u-hearts i { width: 26px; height: 22px; }
.u-chip { font-size: .8rem; }
.u-sub { font-size: 1.35rem; }
html body:not(#_):not(#_) .u-day .swipe.u-swipe { width: 470px !important; height: 80px !important; }
html body:not(#_):not(#_) .u-swipe .sw-knob { width: 68px !important; height: 68px !important; }
html body:not(#_):not(#_) .u-swipe .sw-txt { font-size: .95rem !important; padding-left: 86px !important; }
html body:not(#_):not(#_) .u-swipe .sw-fill { width: calc(var(--x) + 76px) !important; }
.u-scene { margin-top: -40px; }
.u-cloud { width: 150px; } .u-cloud.c2 { width: 200px; } .u-cloud.c3 { width: 120px; }
}
/* pagina urban */
.urban { position: relative; min-height: 100vh; background: var(--sky); overflow: hidden; display: flex; flex-direction: column; color: var(--pxink); }
.ue-wrap { position: relative; z-index: 2; flex: 1; width: 100%; max-width: 760px; margin: 0 auto; box-sizing: border-box; padding: 96px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.urban .u-scene { margin: 0; width: 100%; flex: none; }
.urban.page-in .ue-wrap > * { animation: u-pop .6s cubic-bezier(.22,1,.36,1) both; } .urban.page-in .ue-wrap > *:nth-child(2) { animation-delay: .1s; } .urban.page-in .ue-wrap > *:nth-child(3) { animation-delay: .2s; } .urban.page-in .ue-wrap > *:nth-child(4) { animation-delay: .3s; } .urban.page-in .ue-wrap > *:nth-child(5) { animation-delay: .4s; }
@keyframes u-pop { from { opacity: 0; transform: translateY(16px); } }
.ue-box { width: 100%; box-sizing: border-box; background: #fff8e8; padding: 22px 18px; box-shadow: 0 0 0 4px var(--pxink), 6px 6px 0 4px var(--pxink); display: grid; gap: 12px; justify-items: center; margin-top: 10px; }
.ue-box h2 { margin: 0; font: 400 .95rem/1.5 var(--px) !important; text-transform: uppercase; color: var(--pxink) !important; }
.ue-box p { margin: 0; font: 500 1.08rem/1.45 var(--pxs); }
.ue-tag { font: 400 .62rem/1 var(--px); text-transform: uppercase; color: #fff; background: #e2452f; padding: 8px 10px; box-shadow: 3px 3px 0 var(--pxink); }
.ue-tag.ue-green { background: #4fb04a; }
.ue-load { width: 100%; max-width: 320px; height: 22px; box-shadow: 0 0 0 3px var(--pxink); background: #fff; padding: 3px; box-sizing: border-box; }
.ue-load i { display: block; height: 100%; width: 10%; background: repeating-linear-gradient(90deg, #4fb04a 0 12px, transparent 12px 16px); animation: u-load 4s linear infinite; }
@keyframes u-load { to { width: 100%; } }
.ue-blink { font: 400 .7rem/1 var(--px) !important; text-transform: uppercase; animation: u-blink 1s steps(1) infinite; }
@media (min-width: 960px) { .urban .u-scene { height: 360px; } .ue-box h2 { font-size: 1.2rem !important; } }
@media (prefers-reduced-motion: reduce) { .u-cloud, .u-coin, .u-hearts i, .u-swipe .coin { animation: none !important; } }
.u-scene.u-d { display: none !important; }
@media (min-width: 960px) {
.u-scene.u-m { display: none !important; } .u-scene.u-d { display: block !important; }
html body:not(#_) .u-scene { height: clamp(300px, 22vw, 440px) !important; }
html body:not(#_):not(#_) .u-title { font-size: clamp(3rem, 4.6vw, 5.4rem) !important; }
html body:not(#_):not(#_):not(#_) .f-hero.u-day { gap: 14px; }
.u-day .u-scene { margin-top: -10px !important; }
}
html body:not(#_):not(#_) svg.u-cloud { width: 90px !important; height: 30px !important; }
html body:not(#_):not(#_) svg.u-cloud.c2 { width: 120px !important; height: 40px !important; }
html body:not(#_):not(#_) svg.u-cloud.c3 { width: 72px !important; height: 24px !important; }
@media (min-width: 960px) { html body:not(#_):not(#_) svg.u-cloud { width: 150px !important; height: 50px !important; } html body:not(#_):not(#_) svg.u-cloud.c2 { width: 200px !important; height: 67px !important; } html body:not(#_):not(#_) svg.u-cloud.c3 { width: 120px !important; height: 40px !important; } }
/* passaggio morbido mattoni -> resto della home */
html body:not(#_):not(#_) .u-day .u-dither { position: absolute !important; left: 0 !important; right: 0 !important; bottom: -1px !important; width: 100% !important; max-width: none !important; height: 40px !important; margin: 0 !important; z-index: 3 !important; display: block; }
@media (min-width: 960px) { html body:not(#_):not(#_) .u-day .u-dither { height: 64px !important; } }
/* scena a pixel come immagine (leggera) */
html body:not(#_) div.u-scene { position: relative; overflow: hidden; }
.u-scene-img, .u-coins { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; display: block; }
.u-scene-img { object-fit: cover; object-position: 50% 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.u-coin { will-change: transform; }
.u-cloud { will-change: translate; }
html body:not(#_):not(#_) .u-day div.u-scene { align-self: stretch !important; width: auto !important; margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px))) !important; margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))) !important; }
html body:not(#_):not(#_) .urban div.u-scene { width: 100% !important; }
html body:not(#_):not(#_):not(#_):not(#_) .f-hero[hidden] { display: none !important; }
/* ===== Gioco Urban Escape ===== */
.ue-game { text-align: left; justify-items: stretch; }
.ue-game > .ue-tag, .ue-lv-top { justify-self: start; }
.ue-game h2 { text-align: left; }
.ue-game p { font: 500 1.08rem/1.5 var(--pxs); margin: 0; }
.ue-rules { margin: 0; padding-left: 18px; display: grid; gap: 6px; font: 500 1rem/1.45 var(--pxs); }
.ue-form { display: grid; gap: 10px; }
.ue-form label { display: grid; gap: 6px; font: 400 .62rem/1 var(--px); text-transform: uppercase; }
.ue-form input { font: 600 1.15rem var(--pxs); color: var(--pxink); background: #fff; border: 0; border-radius: 0; padding: 12px 12px; box-shadow: 0 0 0 3px var(--pxink); outline: none; -webkit-appearance: none; appearance: none; }
.ue-form input:focus { box-shadow: 0 0 0 3px var(--pxink), 0 0 0 7px #ffd23f; }
.ue-btn { font: 400 .8rem/1 var(--px); text-transform: uppercase; color: #fff; background: #e2452f; border: 0; padding: 15px 18px; box-shadow: 0 0 0 3px var(--pxink), 5px 5px 0 3px var(--pxink); cursor: pointer; text-decoration: none; text-align: center; margin: 6px 6px 10px 3px; transition: transform .12s ease, box-shadow .12s ease; }
.ue-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 3px var(--pxink), 1px 1px 0 3px var(--pxink); }
.ue-hint-btn { background: #4fb04a; font-size: .66rem; justify-self: start; padding: 11px 14px; }
.ue-hint-btn:disabled { opacity: .45; cursor: not-allowed; }
.ue-hint { background: #fff3c4; padding: 12px; box-shadow: 0 0 0 3px #e0b400; }
.ue-err { color: #c2321f; font-weight: 700 !important; min-height: 1.2em; }
.ue-lv-top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.ue-time { font: 400 .7rem var(--px); }
.ue-where { font: 400 .66rem/1.5 var(--px) !important; text-transform: uppercase; color: #2f6fd1; }
.ue-task { background: #fff; padding: 14px; box-shadow: 0 0 0 3px var(--pxink); font: 600 1.08rem/1.5 var(--pxs); }
.ue-coord { display: flex; align-items: center; gap: 6px; font: 400 1rem var(--px); }
.ue-coord input { width: 2.6em; text-align: center; padding: 10px 0 !important; font: 400 1rem var(--px) !important; }
.ue-coins { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
.ue-coin { width: 38px; height: 38px; display: grid; place-items: center; font: 400 .9rem var(--px); color: #8a6a00; background: rgba(255,255,255,.4); box-shadow: 0 0 0 3px rgba(29,26,51,.25); border-radius: 50%; }
.ue-coin.got { color: var(--pxink); background: #ffd23f; box-shadow: 0 0 0 3px var(--pxink), 3px 3px 0 3px var(--pxink); animation: ue-coin-in .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes ue-coin-in { from { transform: translateY(-20px) scale(.4); } }
.u-hearts i.lost { opacity: .25; filter: grayscale(1); }
.ue-reset { font: 400 .55rem var(--px); text-transform: uppercase; background: none; border: 0; color: var(--pxink); opacity: .6; text-decoration: underline; cursor: pointer; padding: 10px; }
.ue-reset.armed { color: #c2321f; opacity: 1; }
.ue-pop { animation: u-pop .5s cubic-bezier(.22,1,.36,1); }
.ue-shake { animation: ue-shake .4s; }
@keyframes ue-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.ue-win { text-align: center; justify-items: center; } .ue-win h2 { text-align: center; }
.ue-map { justify-self: center; }
.ue-stats { font: 400 .62rem/1.6 var(--px) !important; text-transform: uppercase; }
/* bottone in alto: direttamente Area staff (o Home quando sei dentro) */
html body:not(#_):not(#_) .burger::before { content: "Area staff"; }
html body:has(#staff:not([hidden]), #bake:not([hidden]), #urban:not([hidden]), #archivio:not([hidden])):not(#_):not(#_) .burger::before { content: "Home"; }
html body:not(#_):not(#_) .burger[aria-expanded="true"]::before { content: "Chiudi"; }
/* ===== Area staff: palette morbida, coerente col sito (lilla, indaco, rosa) ===== */
html body:not(#_):not(#_) #staff { --st-card: #fff; --st-soft: #f5f1fe; --st-line: #e3dbfa; --st-shadow: 0 1px 0 rgba(29,20,96,.04), 0 14px 32px -16px rgba(29,20,96,.38); }
html body:not(#_):not(#_) #staff .side { background: var(--st-card) !important; border: 0 !important; box-shadow: var(--st-shadow) !important; border-radius: 26px !important; }
html body:not(#_):not(#_) #staff .pill-nav { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html body:not(#_):not(#_) #staff .side-logo { background: var(--indigo) !important; }
html body:not(#_):not(#_) #staff .side-out { color: #6d63a8 !important; }
html body:not(#_):not(#_) #staff .pill-nav .ink { background: var(--indigo) !important; border: 0 !important; border-radius: 16px !important; box-shadow: 0 6px 14px -6px rgba(59,42,163,.6); }
html body:not(#_):not(#_) #staff .pill-nav button { color: #6d63a8 !important; }
html body:not(#_):not(#_) #staff .pill-nav button:hover { background: none !important; }
@media (hover: hover) and (pointer: fine) { html body:not(#_):not(#_) #staff .pill-nav button:not([aria-selected="true"]):hover { background: var(--st-soft) !important; color: var(--ink) !important; } }
html body:not(#_):not(#_) #staff .pill-nav .ink { transition: transform .55s cubic-bezier(.22,1,.36,1), width .55s cubic-bezier(.22,1,.36,1), height .55s cubic-bezier(.22,1,.36,1) !important; will-change: transform; }
html body:not(#_):not(#_) #staff .pill-nav button { -webkit-tap-highlight-color: transparent; transition: color .35s ease, background-color .25s ease, transform .2s cubic-bezier(.22,1,.36,1) !important; }
html body:not(#_):not(#_) #staff { overflow-x: clip; }
html body:not(#_):not(#_) #staff .pill-nav button:active { transform: scale(.94); }
html body:not(#_):not(#_) #staff .pill-nav button svg { transition: transform .45s cubic-bezier(.22,1,.36,1); }
html body:not(#_):not(#_) #staff .pill-nav button[aria-selected="true"] svg { transform: translateY(-1px) scale(1.06); }
html body:not(#_):not(#_) #staff .pill-nav button[aria-selected="true"], html body:not(#_):not(#_) #staff .pill-nav button[aria-selected="true"]:hover { color: #fff !important; background: none !important; }
html body:not(#_):not(#_) #staff .card, html body:not(#_):not(#_) .staff-mode .sheet-card { background: var(--st-card, #fff) !important; border: 0 !important; box-shadow: 0 1px 0 rgba(29,20,96,.04), 0 14px 32px -16px rgba(29,20,96,.38) !important; border-radius: 24px !important; }
html body:not(#_):not(#_) #staff .card:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(29,20,96,.04), 0 20px 40px -18px rgba(29,20,96,.45) !important; }
/* prossima attività: card piena indaco */
html body:not(#_):not(#_) #staff .c-lav { background: var(--indigo) !important; color: #fff !important; }
html body:not(#_):not(#_) #staff .c-lav :is(h3, .big, .muted-s, .bar-lbl span) { color: #fff !important; }
html body:not(#_):not(#_) #staff .c-lav .muted-s, html body:not(#_):not(#_) #staff .c-lav .bar-lbl span { opacity: .72; }
html body:not(#_):not(#_) #staff .c-lav .card-head svg { stroke: #fff !important; }
html body:not(#_):not(#_) #staff .c-lav .chip { background: #e0477f !important; color: #fff !important; }
html body:not(#_):not(#_) #staff .c-lav .b-base, html body:not(#_):not(#_) #staff .c-lav .b-top { background: repeating-linear-gradient(-45deg, rgba(255,255,255,.55) 0 2px, transparent 2px 7px), rgba(255,255,255,.12) !important; }
/* compiti: bianca con accento rosa */
html body:not(#_):not(#_) #staff .c-sky { background: var(--st-card) !important; }
html body:not(#_):not(#_) #staff .c-sky .chip { background: #fde3ee !important; color: #b8265d !important; }
html body:not(#_):not(#_) #staff .c-sky .b-base, html body:not(#_):not(#_) #staff .c-sky .b-top { background: #e0477f !important; }
/* spesa: lilla chiaro */
html body:not(#_):not(#_) #staff .c-rose { background: var(--lilac-l) !important; }
html body:not(#_):not(#_) #staff .c-rose .chip { background: #fff !important; color: var(--indigo) !important; }
html body:not(#_):not(#_) #staff .c-rose .b-base, html body:not(#_):not(#_) #staff .c-rose .b-top { background: var(--indigo) !important; }
html body:not(#_):not(#_) #staff .card-head svg { stroke: var(--indigo); opacity: .8; }
html body:not(#_):not(#_) #staff :is(.big, h2, h3) { color: var(--ink); }
/* persone, celle, chip */
html body:not(#_):not(#_) #staff .avatar, html body:not(#_):not(#_) #staff .item .who { background: #fde3ee !important; color: #b8265d !important; border: 0 !important; }
html body:not(#_):not(#_) #staff .prog { background: var(--st-line) !important; } html body:not(#_):not(#_) #staff .prog i { background: #e0477f !important; }
html body:not(#_):not(#_) #staff .chip.dark { background: var(--indigo) !important; color: #fff !important; }
html body:not(#_):not(#_) #staff :is(.cell.date, .pipe thead th) { background: var(--st-soft) !important; }
html body:not(#_):not(#_) #staff .cell.lav { background: #e4dcfb !important; } html body:not(#_):not(#_) #staff .cell.sky { background: #e2f3e6 !important; color: #23663a; } html body:not(#_):not(#_) #staff .cell.rose { background: #fde3ee !important; color: #b8265d; }
/* campi */
html body:not(#_):not(#_) #staff .day { background: #fff !important; border: 0 !important; box-shadow: 0 6px 14px -10px rgba(29,20,96,.45) !important; }
html body:not(#_):not(#_) #staff .day.out { background: rgba(255,255,255,.45) !important; box-shadow: none !important; opacity: .6; }
html body:not(#_):not(#_) #staff .day.today { box-shadow: inset 0 0 0 2px #e0477f, 0 6px 14px -10px rgba(29,20,96,.45) !important; }
html body:not(#_):not(#_) #staff .day.today .n { background: #e0477f !important; color: #fff !important; }
html body:not(#_):not(#_) #staff .item { background: #fff !important; border: 0 !important; box-shadow: 0 1px 0 rgba(29,20,96,.04), 0 10px 24px -14px rgba(29,20,96,.35) !important; }
html body:not(#_):not(#_) #staff :is(.round, .ghost:not(.tome)) { background: #fff !important; border: 0 !important; color: var(--indigo) !important; box-shadow: 0 6px 16px -10px rgba(29,20,96,.5) !important; }
html body:not(#_):not(#_) #staff :is(form.add, .item, .empty-state, .cal, .att-card) { border-color: transparent; }
html body:not(#_):not(#_) #staff form.add { background: #fff !important; border: 0 !important; box-shadow: 0 1px 0 rgba(29,20,96,.04), 0 14px 32px -16px rgba(29,20,96,.38) !important; }
html body:not(#_):not(#_) #staff .solid { background: var(--indigo) !important; box-shadow: 0 8px 18px -8px rgba(59,42,163,.7) !important; }
html body:not(#_):not(#_) .staff-mode :is(.field input, .field textarea, .field select), html body:not(#_):not(#_) #staff :is(input, select, textarea):not([type=checkbox]) { background: var(--st-soft, #f5f1fe) !important; border: 1.5px solid var(--st-line, #e3dbfa) !important; box-shadow: none !important; }
html body:not(#_):not(#_) #staff :is(input, select, textarea):focus { border-color: var(--indigo) !important; outline: none; background: #fff !important; }
html body:not(#_):not(#_) #staff .staff-msg { background: rgba(255,255,255,.55) !important; border: 1.5px dashed rgba(59,42,163,.3) !important; }
/* ===== Area staff: cambi di sezione leggeri (niente blur, niente animazioni ripetute) ===== */
html body:not(#_):not(#_) #staff, html body:not(#_):not(#_) #staff * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html body:not(#_):not(#_) #staff :is(.ov-cards > *, .ov-side, .ov-pipe) { animation: none !important; }
html body:not(#_):not(#_) #staff .pane-in { animation: st-pane .38s cubic-bezier(.22,1,.36,1) both !important; }
html body:not(#_):not(#_) #staff .stagger > * { animation: st-pane .38s cubic-bezier(.22,1,.36,1) both !important; }
html body:not(#_):not(#_) #staff .stagger > :nth-child(n+2) { animation-delay: .03s !important; } html body:not(#_):not(#_) #staff .stagger > :nth-child(n+4) { animation-delay: .06s !important; } html body:not(#_):not(#_) #staff .stagger > :nth-child(n+7) { animation-delay: .09s !important; }
@keyframes st-pane { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
/* ===== Pop-up del giorno (calendario staff) ===== */
#day-pop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px)); }
#day-pop .dp-scrim { position: absolute; inset: 0; background: rgba(29,20,96,.32); opacity: 0; transition: opacity .22s ease; }
#day-pop .dp-card { position: relative; width: min(340px, 100%); max-height: min(70vh, 520px); overflow: auto; background: #fff; color: #1d1460; border-radius: 26px; padding: 18px 18px 16px; box-shadow: 0 30px 60px -20px rgba(29,20,96,.55); opacity: 0; transform: translate3d(0, 14px, 0) scale(.94); transition: opacity .22s ease, transform .32s cubic-bezier(.22,1,.36,1); font-family: var(--font, system-ui, sans-serif); }
#day-pop.in .dp-scrim { opacity: 1; } #day-pop.in .dp-card { opacity: 1; transform: none; }
#day-pop.out .dp-scrim { opacity: 0; } #day-pop.out .dp-card { opacity: 0; transform: translate3d(0, 8px, 0) scale(.97); transition-duration: .18s; }
#day-pop .dp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
#day-pop .dp-k { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #e0477f; }
#day-pop h3 { margin: 2px 0 0; font-family: "Caprasimo", Georgia, serif; font-weight: 400; font-size: 1.6rem; line-height: 1.1; color: #1d1460; }
#day-pop .dp-x { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #f5f1fe; color: #3b2aa3; font-size: 1.3rem; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#day-pop .dp-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
#day-pop .dp-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 16px; background: #f5f1fe; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .2s cubic-bezier(.22,1,.36,1); }
#day-pop .dp-row:active { transform: scale(.98); }
#day-pop .dp-row.task { cursor: default; background: #fff; box-shadow: inset 0 0 0 1.5px #e3dbfa; }
#day-pop .dp-row span { flex: 1; min-width: 0; display: grid; gap: 2px; }
#day-pop .dp-row b { font-weight: 700; font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#day-pop .dp-row small { font-size: .8rem; color: #6d63a8; }
#day-pop .dp-row em { font-style: normal; font-size: 1.3rem; color: #3b2aa3; }
#day-pop .dp-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--sw, #3b2aa3); box-shadow: 0 0 0 3px #fff; }
#day-pop .dp-check { flex: none; width: 20px; height: 20px; border-radius: 7px; box-shadow: inset 0 0 0 2px #c3b5ef; display: grid; place-items: center; font-style: normal; font-size: .8rem; color: #fff; }
#day-pop .done .dp-check { background: #e0477f; box-shadow: none; } #day-pop .done b { text-decoration: line-through; opacity: .55; }
#day-pop .dp-empty { padding: 14px 12px; border-radius: 16px; background: #f5f1fe; color: #6d63a8; font-size: .92rem; text-align: center; }
#day-pop .dp-add { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#day-pop .dp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 10px; border-radius: 14px; border: 0; font: 700 .95rem var(--font, system-ui, sans-serif); cursor: pointer; background: #f5f1fe; color: #3b2aa3; -webkit-tap-highlight-color: transparent; transition: transform .2s cubic-bezier(.22,1,.36,1); }
#day-pop .dp-btn.main { background: #3b2aa3; color: #fff; box-shadow: 0 8px 18px -8px rgba(59,42,163,.7); }
#day-pop .dp-btn:active { transform: scale(.96); }
#day-pop .dp-btn b { font-size: 1.15rem; line-height: 1; }
/* titoli lunghi sulle copertine: testo più piccolo, disegno più contenuto */
html body:not(#_):not(#_) .book.long .bt, html body:not(#_):not(#_) .bk.long .bk-t { font-size: .78em !important; line-height: 1.05 !important; }
html body:not(#_):not(#_) .book.long .art { transform: scale(.82); transform-origin: 50% 80%; }
html body:not(#_):not(#_) .bk.long .bk-a svg { transform: scale(.82); transform-origin: 50% 80%; }
/* Libri con locandina: la copertina è l'immagine della locandina */
html body:not(#_) .library .book.has-poster { background-color: #e9e2d4 !important; background-size: cover !important; background-position: center top !important; background-repeat: no-repeat !important; padding: 0 !important; }
/* ===== Pop-up attività (anteprima pagina) ===== */
#act-pop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); transition: padding .45s cubic-bezier(.22,1,.36,1); }
#act-pop .ap-scrim { position: absolute; inset: 0; background: rgba(29,20,96,.36); opacity: 0; transition: opacity .22s ease; }
#act-pop .ap-card { position: relative; display: flex; flex-direction: column; width: min(380px, 100%); height: min(640px, calc(100dvh - 40px)); background: #fff; color: #1d1460; border-radius: 26px; padding: 14px; gap: 12px; box-shadow: 0 30px 60px -20px rgba(29,20,96,.55); opacity: 0; transform: translate3d(0, 16px, 0) scale(.94); transition: opacity .22s ease, transform .32s cubic-bezier(.22,1,.36,1), width .45s cubic-bezier(.22,1,.36,1), height .45s cubic-bezier(.22,1,.36,1), border-radius .45s ease; font-family: var(--font, system-ui, sans-serif); }
#act-pop.in .ap-scrim { opacity: 1; } #act-pop.in .ap-card { opacity: 1; transform: none; }
#act-pop.out .ap-card { opacity: 0; transform: translate3d(0, 8px, 0) scale(.97); transition-duration: .2s; }
#act-pop.full { padding: 0; }
#act-pop.full .ap-card { width: 100%; height: 100dvh; border-radius: 0; padding: max(14px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); }
#act-pop .ap-head { display: flex; align-items: flex-start; gap: 8px; padding: 4px 4px 0; }
#act-pop .ap-tt { flex: 1; min-width: 0; }
#act-pop .ap-k { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #e0477f; }
#act-pop h3 { margin: 2px 0 0; font-family: "Caprasimo", Georgia, serif; font-weight: 400; font-size: 1.45rem; line-height: 1.1; color: #1d1460; text-wrap: balance; }
#act-pop .ap-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 0; background: #f5f1fe; color: #3b2aa3; font-size: 1.3rem; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .2s cubic-bezier(.22,1,.36,1); }
#act-pop .ap-ic:active { transform: scale(.92); }
#act-pop .g-in { display: none; } #act-pop.full .g-in { display: inline; } #act-pop.full .g-out { display: none; }
#act-pop .ap-frame { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-radius: 18px; background: #c3b5ef; box-shadow: inset 0 0 0 1.5px #e3dbfa; }
#act-pop .ap-zoom { width: 400px; } #act-pop .ap-zoom > * { display: block; min-height: 0 !important; animation: none !important; }
#act-pop .ap-zoom.pv-bake { background: #fde3ee; } #act-pop .ap-zoom.pv-urban { background: #0a0a0a; }
#act-pop .ap-frame.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px; background: #f5f1fe; box-shadow: none; text-align: center; }
#act-pop .ap-frame.empty p { margin: 0; max-width: 26ch; color: #6d63a8; font-size: .95rem; line-height: 1.4; }
#act-pop .ap-cover { width: 150px; aspect-ratio: 3 / 4; border-radius: 6px 14px 14px 6px; background: var(--sw, #3b2aa3) center top / cover no-repeat; color: var(--si, #fff); display: flex; flex-direction: column; padding: 12px; gap: 6px; box-shadow: inset 7px 0 0 rgba(0,0,0,.16), 0 14px 26px -12px rgba(29,20,96,.5); text-align: left; }
#act-pop .ap-cover .bt { font-family: "Caprasimo", Georgia, serif; font-size: 1rem; line-height: 1.05; }
#act-pop .ap-cover .art { position: relative; flex: 1; display: block; } #act-pop .ap-cover .art svg { width: 100%; height: 100%; }
#act-pop .ap-foot { display: flex; gap: 8px; } #act-pop .ap-foot .dp-btn { flex: 1; }
#act-pop .dp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 13px 10px; border-radius: 14px; border: 0; font: 700 .95rem var(--font, system-ui, sans-serif); cursor: pointer; background: #f5f1fe; color: #3b2aa3; -webkit-tap-highlight-color: transparent; transition: transform .2s cubic-bezier(.22,1,.36,1); }
#act-pop .dp-btn.main { background: #3b2aa3; color: #fff; box-shadow: 0 8px 18px -8px rgba(59,42,163,.7); }
#act-pop .dp-btn:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }