/* Chico ti scrive — stile del calendario (fedele alla copertina del libro) */

@font-face{font-family:Rye;src:url(../fonts/rye-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Cormorant Garamond";font-weight:500;src:url(../fonts/cormorant-500-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:italic;src:url(../fonts/cormorant-500-italic.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Cormorant Garamond";font-weight:700;src:url(../fonts/cormorant-700-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Cormorant Garamond";font-weight:700;font-style:italic;src:url(../fonts/cormorant-700-italic.woff2) format("woff2");font-display:swap}
@font-face{font-family:"IM Fell English";src:url(../fonts/imfell-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"IM Fell English";font-style:italic;src:url(../fonts/imfell-400-italic.woff2) format("woff2");font-display:swap}

:root{
  --red:#BE1E32;--red-dark:#9A1527;--red-deep:#7A1020;
  --gold:#E6B84E;--gold-light:#F6D98A;--gold-dark:#A87B1E;--gold-ink:#B88A2A;
  --teal:#0B4F5A;--cream:#F7E9CC;--cream-2:#F9EDD0;--ink:#3A2420;
  --serif:"Cormorant Garamond",Georgia,serif;--letter:"IM Fell English",Georgia,serif;--display:Rye,Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  position:relative;margin:0;min-height:100vh;min-height:100dvh;color:var(--cream-2);font-family:var(--serif);font-size:18px;line-height:1.4;
  background:
    radial-gradient(ellipse at 50% 30%,rgba(255,120,120,.22) 0%,rgba(0,0,0,0) 55%),
    radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 55%,rgba(70,0,12,.45) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.02  0 0 0 0 0.05  0 0 0 1.1 -0.38'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none' stroke='%23F6D98A' stroke-width='1' opacity='0.5'%3E%3Cpath d='M36 2L70 36L36 70L2 36Z' stroke-opacity='.28'/%3E%3Cpath d='M36 14L58 36L36 58L14 36Z' stroke-opacity='.22'/%3E%3Cpath d='M36 24C42 28 44 32 36 36C28 32 30 28 36 24ZM36 48C42 44 44 40 36 36C28 40 30 44 36 48ZM24 36C28 30 32 28 36 36C32 44 28 42 24 36ZM48 36C44 30 40 28 36 36C40 44 44 42 48 36Z' fill='%23F6D98A' fill-opacity='.16' stroke-opacity='.3'/%3E%3Ccircle cx='0' cy='0' r='3' fill='%23F6D98A' fill-opacity='.2' stroke='none'/%3E%3Ccircle cx='72' cy='0' r='3' fill='%23F6D98A' fill-opacity='.2' stroke='none'/%3E%3Ccircle cx='0' cy='72' r='3' fill='%23F6D98A' fill-opacity='.2' stroke='none'/%3E%3Ccircle cx='72' cy='72' r='3' fill='%23F6D98A' fill-opacity='.2' stroke='none'/%3E%3C/svg%3E"),
    var(--red);
}
a{color:inherit}
img{max-width:100%}
button{font:inherit;color:inherit}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sr{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}

/* cornice dorata e fregi agli angoli */
.frame{position:absolute;inset:12px;border:1.5px solid var(--gold);pointer-events:none;z-index:0}
.frame::after{content:"";position:absolute;inset:9px;border:1px solid rgba(230,184,78,.5)}
.orn{position:absolute;width:60px;height:89px;background:url(../img/fregio.svg) no-repeat 0 0/100% 100%;pointer-events:none;z-index:0}
.orn.tl{top:6px;left:6px}.orn.tr{top:6px;right:6px;transform:scaleX(-1)}
.orn.bl{bottom:6px;left:6px;transform:scaleY(-1)}.orn.br{bottom:6px;right:6px;transform:scale(-1,-1)}
@media (min-width:900px){.frame{inset:14px}.orn{width:90px;height:134px}.orn.tl,.orn.tr{top:8px}.orn.bl,.orn.br{bottom:8px}.orn.tl,.orn.bl{left:8px}.orn.tr,.orn.br{right:8px}}

.page{position:relative;z-index:1;width:100%;max-width:440px;margin:0 auto;padding:62px 40px 70px}
@media (max-width:370px){.page{padding-left:30px;padding-right:30px}}

/* barra in alto */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.back{display:flex;align-items:center;gap:2px;min-height:44px;padding-right:8px;text-decoration:none;color:var(--cream-2);font-size:19px;font-weight:700;letter-spacing:.5px}
.back svg{width:24px;height:24px}
.pill{display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1.5px solid var(--gold);border-radius:17px;color:var(--gold-light);font-size:15px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap}

/* Chico animato: quattro strati della stessa immagine */
.chico{position:absolute;animation:tilt 7s ease-in-out infinite;transform-origin:50% 92%}
.chico-body{position:relative;animation:breathe 1.4s ease-in-out infinite;transform-origin:50% 100%}
.chico img{display:block;width:100%;height:auto}
.chico .c-main{clip-path:inset(0 31% 0 32%)}
.chico .hairL,.chico .hairR,.chico .chico-tongue{position:absolute;left:0;top:0;width:100%;height:100%}
.chico .hairL{clip-path:inset(0 66.5% 0 0);animation:swayL 2.8s ease-in-out infinite;transform-origin:33% 40%}
.chico .hairR{clip-path:inset(0 0 0 67.5%);animation:swayR 3.1s ease-in-out infinite;transform-origin:68% 40%}
.chico .chico-tongue{clip-path:inset(63% 42% 8% 40%);animation:pant 1.4s ease-in-out infinite;transform-origin:48.5% 64%}
@keyframes breathe{0%,100%{transform:scale(1,1) rotate(0)}50%{transform:scale(1.02,1.018) rotate(-.5deg)}}
@keyframes pant{0%,100%{transform:scale(1,1)}35%{transform:scale(.97,1.11)}70%{transform:scale(1,1.03)}}
@keyframes tilt{0%,100%{transform:rotate(0)}22%,30%{transform:rotate(-2deg)}52%,62%{transform:rotate(1.6deg)}}
@keyframes swayL{0%,100%{transform:rotate(0)}50%{transform:rotate(-1.4deg) translateY(1px)}}
@keyframes swayR{0%,100%{transform:rotate(0)}50%{transform:rotate(1.4deg) translateY(1px)}}
@keyframes twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.tw{animation:twinkle 2.8s ease-in-out infinite;transform-origin:50% 50%}

/* testi */
.kicker{text-align:center;font-size:14px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--red)}
.panel .kicker{color:var(--gold-light)}
.h-title{margin-top:4px;font-family:var(--display);font-size:24px;line-height:1.15;color:var(--cream-2)}
.h-sub{margin-top:4px;font-size:18px;font-style:italic;font-weight:500;color:var(--cream-2)}
.note{margin-top:10px;font-size:18px;line-height:1.3;font-style:italic;color:var(--cream-2)}
.display{font-family:var(--display);color:var(--teal);-webkit-text-stroke:2px var(--gold);paint-order:stroke fill;letter-spacing:1px;line-height:1}

/* lettera su carta */
.letter-wrap{position:relative;margin-top:150px}
.arch{position:absolute;left:50%;margin-left:-125px;top:-160px;z-index:0;width:250px;height:227px}
.paper{position:relative;z-index:1;background:var(--cream);border-radius:6px;padding:76px 24px 28px;color:var(--ink);
  box-shadow:0 10px 22px rgba(80,0,10,.4),inset 0 0 0 5px var(--cream),inset 0 0 0 6.5px var(--gold),inset 0 0 0 10px var(--cream),inset 0 0 0 11px rgba(184,138,42,.7)}
.paper .chico{z-index:2;top:-126px;left:50%;margin-left:-96px;width:192px}
.greet{margin-top:10px;font-family:var(--letter);font-style:italic;line-height:1.12;color:var(--red);overflow-wrap:anywhere}
.letter-body{margin-top:12px;font-family:var(--letter);font-size:18px;line-height:1.55;color:var(--ink)}
.letter-body p{margin:0 0 12px}
.sign{margin-top:8px;text-align:right}
.sign .tuo{font-family:var(--letter);font-size:18px;font-style:italic;color:var(--ink)}
.sign .name{font-family:var(--display);font-size:36px;line-height:1.1;color:var(--teal);-webkit-text-stroke:1px var(--gold-ink);paint-order:stroke fill}

/* riquadro verde della sorpresa */
.panel{margin-top:26px;position:relative;padding:20px 20px 22px;border-radius:6px;background:var(--teal);text-align:center;color:var(--cream-2);box-shadow:0 8px 18px rgba(40,0,10,.35),inset 0 0 0 1.5px var(--gold)}
.panel-intro{margin-top:8px;font-size:19px;line-height:1.3;font-style:italic;font-weight:500}

/* pulsanti */
.btn{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 16px;width:100%;border:0;border-radius:26px;background:var(--gold);color:var(--teal);font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;text-decoration:none;text-align:center;line-height:1.1;box-shadow:0 4px 0 var(--gold-dark);outline:2px solid var(--gold-light);outline-offset:3px;cursor:pointer}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--gold-dark)}
.btn[aria-disabled=true],.btn:disabled{opacity:.55;cursor:default}
.btn-red{background:var(--red);color:var(--cream-2);box-shadow:0 3px 0 var(--red-deep);outline:0}
.btn-ghost{display:flex;align-items:center;justify-content:center;gap:6px;height:48px;border:1.5px solid var(--gold);border-radius:24px;color:var(--cream-2);font-size:18px;font-weight:700;letter-spacing:.5px;text-decoration:none;background:transparent;cursor:pointer;width:100%}
.btn-ghost svg{width:18px;height:18px}
.btn-cream{background:var(--cream-2);color:var(--teal);box-shadow:none;outline:0;min-height:44px;font-size:17px}
.daynav{margin-top:22px}
.daynav .row{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:12px}
.daynav .btn-ghost.wide{margin-top:12px}
a:focus-visible,button:focus-visible,label:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--cream-2);outline-offset:3px}

/* frontespizio */
.cover{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding-top:46px;padding-bottom:40px}
.cover .lead{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold-light);text-align:center}
.cover .stage{position:relative;width:100%;max-width:322px;height:262px;margin-top:8px}
.cover .stage .arch-c{position:absolute;top:0;left:50%;margin-left:-135px;width:270px;height:246px}
.cover .stage .chico{top:40px;left:50%;margin-left:-118px;width:236px}
.cover .t1{position:relative;margin-top:-36px;font-size:88px;-webkit-text-stroke:2.5px var(--gold)}
.cover .t2{margin-top:-4px;font-size:46px}
.cover .sub{margin-top:12px;font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold-light);text-align:center}
.cover .per{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:10px;width:100%}
.cover .per small{display:block;font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--cream-2)}
.cover .per .nm{line-height:1.05;font-style:italic;font-weight:700;color:var(--gold-light);overflow-wrap:anywhere}
.cover .go{margin-top:auto;max-width:290px;min-height:56px;font-size:21px;letter-spacing:1.5px;border-radius:28px}
.cover .spacer{flex:1 1 30px}
@media (max-width:360px){.cover .t1{font-size:76px}.cover .t2{font-size:40px}}

/* scrivania */
.desk-head{padding:0 16px;text-align:center}
.desk-head .lbl{font-size:14px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--cream-2)}
.desk-head .nm{line-height:1.05;font-style:italic;font-weight:700;color:var(--gold-light);overflow-wrap:anywhere}
.count{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 16px;border:1.5px solid var(--gold);border-radius:18px;background:var(--teal)}
.count b{font-family:var(--display);font-weight:400;font-size:17px;line-height:1;color:var(--gold-light)}
.count span{font-size:14px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--cream-2)}
.hero{position:relative;margin-top:128px;padding:78px 18px 18px;text-align:center;background:var(--cream);border-radius:6px;color:var(--ink);box-shadow:0 8px 18px rgba(80,0,10,.35),inset 0 0 0 4px var(--cream),inset 0 0 0 5.5px var(--gold)}
.hero .arch-h{position:absolute;top:-118px;left:50%;margin-left:-95px;width:190px;height:118px}
.hero .chico{top:-104px;left:50%;margin-left:-80px;width:160px}
.hero .when{font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--red)}
.hero .act{font-family:var(--display);font-size:22px;line-height:1.15;color:var(--teal)}
.hero .msg{margin-top:2px;font-size:21px;font-style:italic;font-weight:500;line-height:1.2}
.hero .btn{outline:0}
.hero .extra{margin-top:10px;font-size:17px;font-style:italic;color:var(--ink)}
.act-block{margin-top:34px}
.act-head{display:flex;flex-direction:column;align-items:center;text-align:center}
.act-head .k{font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--cream-2)}
.act-head .t{margin-top:2px;font-family:var(--display);font-size:25px;line-height:1.15;color:var(--teal);-webkit-text-stroke:1.2px var(--gold);paint-order:stroke fill}
.act-head .rule{margin-top:6px;width:200px;height:12px}
.act-head .s{margin-top:6px;font-size:18px;font-style:italic;font-weight:500}
.tiles{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:98px;border-radius:6px;text-decoration:none;overflow:hidden}
.tile.open{background:var(--cream);box-shadow:inset 0 0 0 3px var(--cream),inset 0 0 0 4.5px var(--gold);transition:transform .15s ease}
.tile.open:hover{transform:translateY(-3px)}
.tile.open .n{font-family:var(--display);font-size:22px;line-height:1;color:var(--teal)}
.tile.open .ty{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--teal)}
.tile.open svg{width:32px;height:21px}
.tile .flap{position:absolute;inset:0;width:100%;height:100%}
.tile.ready{display:block;background:var(--gold);overflow:visible}
.tile.ready .seal{position:absolute;top:14px;left:50%;margin-left:-25px;width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--red);border:3px solid var(--gold-light);font-family:var(--display);font-size:22px;color:var(--cream-2)}
.tile.ready .lab{position:absolute;left:0;right:0;bottom:7px;text-align:center;font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ink)}
.tile.ready .spark{position:absolute;top:-11px;right:-9px;width:22px;height:22px}
.tile.today{animation:glow 2.4s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 3px var(--gold-light),0 0 0 6px rgba(246,217,138,.55),0 4px 0 6px var(--gold-dark)}50%{box-shadow:0 0 0 3px var(--gold-light),0 0 0 11px rgba(246,217,138,0),0 4px 0 6px var(--gold-dark)}}
.tile.locked{display:block;background:var(--red-dark);box-shadow:inset 0 0 0 1.5px var(--gold);cursor:default;outline:0}
.tile.locked .seal{position:absolute;top:14px;left:50%;margin-left:-23px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--gold);border:2.5px solid var(--gold-dark);font-family:var(--display);font-size:20px;color:var(--teal)}
.tile.locked .lab{position:absolute;left:0;right:0;bottom:7px;display:flex;align-items:center;justify-content:center;gap:4px;font-size:14px;font-weight:700;letter-spacing:.5px;color:var(--cream-2)}
.tile.locked .lab svg{width:11px;height:12px}
.tile.locked.shake{animation:lkS .55s ease-in-out}
@keyframes lkS{0%,100%{transform:translateX(0) rotate(0)}15%{transform:translateX(-4px) rotate(-3deg)}30%{transform:translateX(4px) rotate(3deg)}45%{transform:translateX(-3px) rotate(-2deg)}60%{transform:translateX(3px) rotate(2deg)}80%{transform:translateX(-1px) rotate(-1deg)}}
.desk-foot{margin-top:38px;display:flex;flex-direction:column;align-items:center;text-align:center}
.desk-foot .rule{width:200px;height:12px}
.desk-foot p{margin:10px 0 0;font-size:20px;font-style:italic;font-weight:500;line-height:1.3}

/* avviso notifiche */
.notify{margin-top:26px;padding:16px 18px;border-radius:8px;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1.5px rgba(230,184,78,.7);text-align:center}
.notify[hidden]{display:none}
.notify .t{font-family:var(--display);font-size:19px;color:var(--gold-light)}
.notify p{margin:6px 0 0;font-size:18px;line-height:1.3}
.notify .btn{min-height:46px;font-size:17px}
.notify .steps{margin:8px 0 0;padding:0;list-style:none;font-size:17px;line-height:1.35;text-align:left}
.notify .steps li{margin-top:4px}
.notify .close{margin-top:8px;background:none;border:0;color:var(--gold-light);font-size:16px;text-decoration:underline;cursor:pointer}

/* scrivania su schermo grande */
@media (min-width:960px){
  .page.wide{max-width:1160px;padding:56px 64px 100px}
  .desk-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
  .desk-top .brand .k{font-size:15px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gold-light)}
  .desk-top .brand .display{font-size:54px;line-height:1.05}
  .desk-top .chips{display:flex;flex-wrap:wrap;gap:12px}
  .chip{display:inline-flex;align-items:baseline;gap:8px;min-height:46px;padding:8px 22px;border:1.5px solid var(--gold);border-radius:23px;font-size:20px;font-weight:700}
  .chip i{color:var(--gold-light)}
  .desk-head{display:none}
  .count{margin-top:0;height:46px;padding:0 22px;border-radius:23px}
  .count b{font-size:20px}.count span{font-size:18px;letter-spacing:0;text-transform:none}
  .hero{margin-top:36px;padding:0;background:none;box-shadow:none;color:var(--cream-2);display:flex;align-items:center;gap:12px 48px;text-align:left}
  .hero .portrait{position:relative;flex:0 0 340px;height:310px}
  .hero .arch-h{top:0;left:5px;margin:0;width:330px;height:270px}
  .hero .chico{top:50px;left:50px;margin:0;width:240px}
  .hero .when{font-size:16px;letter-spacing:3px;color:var(--gold-light)}
  .hero .act{display:none}
  .hero .msg{margin-top:6px;font-size:52px;font-weight:700;line-height:1.05;color:var(--cream-2)}
  .hero .btn{display:inline-flex;width:auto;padding:0 36px;min-height:58px;font-size:21px;border-radius:29px;background:var(--gold);color:var(--teal);box-shadow:0 4px 0 var(--gold-dark);outline:2px solid var(--gold-light)}
  .hero .extra{color:var(--cream-2);font-size:20px}
  .tiles{grid-template-columns:repeat(8,minmax(0,1fr));gap:16px}
  .tile{height:118px}
  .act-block{margin-top:48px}
}
@media (max-width:959px){.desk-top,.hero .portrait-only{display:none}}

/* apertura della busta */
.opening{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding-bottom:40px}
.opening .topbar{width:100%}
.env-stage{position:relative;width:310px;height:470px;margin-top:30px}
.bursts{position:absolute;left:50%;margin-left:-125px;top:20px;width:250px;height:250px}
.bursts svg{position:absolute}
.env-stage .chico{z-index:3;left:50%;top:150px;width:210px;margin-left:-105px}
.env{position:absolute;left:50%;margin-left:-130px;top:210px;width:260px;height:190px;z-index:2}
.env svg{position:absolute;left:0;top:0;overflow:visible}
.env-cta{position:relative;width:100%;height:90px;margin-top:4px;text-align:center}
.env-cta .hint{position:absolute;left:0;right:0;top:14px;font-size:24px;font-style:italic;font-weight:500}
.env-cta .act{position:absolute;left:0;right:0;top:0}
.env-cta .btn{margin-top:0;min-height:54px;font-size:21px;letter-spacing:1.5px;border-radius:27px}
@keyframes envIn{0%{transform:translateY(40px) scale(.8);opacity:0}8%{transform:translateY(0) scale(1);opacity:1}14%{transform:rotate(-3deg)}18%{transform:rotate(3deg)}22%,100%{transform:rotate(0)}}
@keyframes flap{0%,22%{transform:scaleY(1);opacity:1}30%{transform:scaleY(.02);opacity:1}31%,100%{transform:scaleY(.02);opacity:0}}
@keyframes bflap{0%,30%{transform:scaleY(-.02);opacity:0}31%{opacity:1;transform:scaleY(-.02)}42%,100%{transform:scaleY(-1);opacity:1}}
@keyframes letterUp{0%,32%{transform:translateY(0)}48%,100%{transform:translateY(-95px)}}
@keyframes dogUp{0%,44%{transform:translateY(110px) scale(.7);opacity:0}60%{transform:translateY(-8px) scale(1.04);opacity:1}68%,100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes burst{0%,44%{transform:scale(0);opacity:0}52%{opacity:1}70%,100%{transform:scale(1.6);opacity:0}}
@keyframes hintA{0%,18%{opacity:1}24%,100%{opacity:0}}
@keyframes hintB{0%,66%{opacity:0;transform:translateY(8px);visibility:hidden}67%{visibility:visible}76%,100%{opacity:1;transform:translateY(0);visibility:visible}}
@keyframes sealGlow{0%,22%{opacity:1}30%,100%{opacity:0}}
.ap{animation-duration:7.5s;animation-iteration-count:1;animation-timing-function:ease-in-out;animation-fill-mode:both}
.ap-env{animation-name:envIn}
.ap-flap{animation-name:flap;transform-box:view-box;transform-origin:130px 0}
.ap-bflap{animation-name:bflap;transform-box:view-box;transform-origin:130px 0}
.ap-let{animation-name:letterUp}
.ap-dog{animation-name:dogUp}
.ap-b{animation-name:burst;transform-origin:50% 50%}
.ap-hA{animation-name:hintA}
.ap-hB{animation-name:hintB}
.ap-seal{animation-name:sealGlow}

/* busta ancora chiusa */
.sealed{margin-top:40px;text-align:center}
.sealed .env-closed{display:block;margin:30px auto 0;width:220px;height:160px;cursor:pointer}
.sealed .env-closed.shake{animation:lkS .55s ease-in-out}
.sealed .h{font-family:var(--display);font-size:28px;color:var(--gold-light);margin-top:20px}
.sealed p{font-size:20px;font-style:italic}

/* video */
.video-box{position:relative;margin-top:14px;border-radius:6px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#CF2A40,var(--red-dark));box-shadow:0 0 0 2px var(--gold)}
.video-box video{display:block;width:100%;height:auto;background:#000}
.placeholder{padding:28px 14px;font-size:19px;font-style:italic}

/* audio con il vinile */
.deck{position:relative;width:250px;height:250px;margin:18px auto 0}
.disc{position:relative;width:250px;height:250px;border-radius:50%;
  background:conic-gradient(from 20deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,.1) 40deg,rgba(255,255,255,0) 90deg,rgba(255,255,255,0) 180deg,rgba(255,255,255,.1) 220deg,rgba(255,255,255,0) 270deg),repeating-radial-gradient(circle at 50% 50%,#191210 0,#191210 2px,#251a17 3px,#191210 4px),#191210;
  box-shadow:0 6px 16px rgba(0,0,0,.45),inset 0 0 0 2px #000;animation:spin 3.4s linear infinite;animation-play-state:paused}
.disc .label{position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px var(--gold),inset 0 0 0 6px var(--red),inset 0 0 0 7px rgba(246,217,138,.7);overflow:hidden}
.disc .label img{position:absolute;left:50%;margin-left:-40px;top:14px;width:80px}
.disc .hole{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#0e0908;box-shadow:0 0 0 2px var(--gold)}
.arm{position:absolute;left:0;top:0;width:250px;height:250px;overflow:visible;transform-origin:222px 26px;transform:rotate(-30deg);transition:transform .8s ease}
.playing .disc{animation-play-state:running}
.playing .arm{transform:rotate(0)}
@keyframes spin{to{transform:rotate(360deg)}}
.bar{margin-top:18px;height:8px;border-radius:4px;background:rgba(0,0,0,.35);overflow:hidden;cursor:pointer}
.bar .fill{width:0;height:8px;background:var(--gold)}
.times{margin-top:4px;display:flex;justify-content:space-between;font-size:16px;font-weight:700}
.playbtn{margin:8px auto 0;display:flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:50%;border:0;background:var(--gold);box-shadow:0 4px 0 var(--gold-dark);outline:2px solid var(--gold-light);outline-offset:3px;cursor:pointer}
.playbtn svg{width:30px;height:30px}
.playbtn .ic-pause{display:none}
.playing .playbtn .ic-play{display:none}
.playing .playbtn .ic-pause{display:block}

/* download */
.previews{margin-top:16px;padding-bottom:6px;display:flex;align-items:flex-end;justify-content:center;gap:16px;flex-wrap:wrap}
.previews img{display:block;max-height:210px;width:auto;max-width:150px;border-radius:6px;background:var(--cream);box-shadow:0 0 0 2px var(--gold),0 4px 10px rgba(0,0,0,.3)}
.previews img:nth-child(odd){transform:rotate(-3deg)}.previews img:nth-child(even){transform:rotate(3deg)}
.prev-card{position:relative;width:150px;height:106px;background:var(--cream);box-shadow:inset 0 0 0 3px var(--cream),inset 0 0 0 4.5px var(--gold),0 4px 10px rgba(0,0,0,.3);transform:rotate(3deg)}
.prev-card img{position:absolute;left:12px;bottom:8px;width:56px;height:auto;box-shadow:none;background:none;transform:none!important}
.prev-card span{position:absolute;left:76px;right:10px;top:18px;font-family:var(--letter);font-style:italic;font-size:14px;line-height:1.15;color:var(--red);text-align:left}

/* codice sconto */
.code{margin-top:16px;padding:14px;border:2px dashed var(--gold-light);border-radius:10px;background:rgba(0,0,0,.18)}
.code .k{font-size:13px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-light)}
.code .v{margin-top:6px;font-family:var(--display);font-size:28px;letter-spacing:3px;overflow-wrap:anywhere}
.code .d{margin-top:4px;font-size:18px;line-height:1.3}
.code .ok{margin-top:6px;font-size:15px;color:var(--gold-light);min-height:1em}

/* giochi: pacchi e porte */
.gm{position:relative;margin-top:14px}
.gm input{position:absolute;opacity:0;pointer-events:none}
.gm .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gm label{display:block;cursor:pointer;padding:8px 2px 6px;border-radius:10px;transition:transform .15s,background .15s}
.gm label:hover{transform:translateY(-4px);background:rgba(246,217,138,.1)}
.gm label svg{display:block;margin:0 auto;overflow:visible;width:86px;height:96px;max-width:100%}
.gm label .num{display:block;margin-top:2px;font-family:var(--display);font-size:18px;color:var(--gold-light)}
.gm .glid,.gm .leaf{transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.gm .glid{transform-origin:20% 100%}
.gm .leaf{transform-box:fill-box;transform-origin:0 50%}
.gm .item{transition:transform .45s .15s cubic-bezier(.3,1.4,.5,1),opacity .2s .15s;transform:translateY(40px);opacity:0}
.gm .win-item,.gm .lose-item{display:none}
.gm.w1 label[for=p1] .win-item,.gm.w2 label[for=p2] .win-item,.gm.w3 label[for=p3] .win-item{display:inline}
.gm.w1 label[for=p2] .lose-item,.gm.w1 label[for=p3] .lose-item,.gm.w2 label[for=p1] .lose-item,.gm.w2 label[for=p3] .lose-item,.gm.w3 label[for=p1] .lose-item,.gm.w3 label[for=p2] .lose-item{display:inline}
.gm .res{display:none;margin-top:14px;min-height:96px;padding:14px;border-radius:8px;font-size:19px;line-height:1.3}
.gm .r0{display:block;border:1.5px dashed rgba(246,217,138,.7)}
.gm input:checked ~ .r0{display:none}
.gm .bad{background:rgba(0,0,0,.2)}
.gm .win{background:var(--cream);box-shadow:inset 0 0 0 2px var(--gold);color:var(--ink)}
.gm .res b{font-family:var(--display);font-weight:400;font-size:21px;color:var(--gold-light)}
.gm .win b{font-size:24px;color:var(--red)}
.gm .res .hint{font-style:italic;color:var(--gold-light)}
#p1:checked ~ .row label[for=p1],#p2:checked ~ .row label[for=p2],#p3:checked ~ .row label[for=p3]{background:rgba(246,217,138,.2);box-shadow:inset 0 0 0 2px var(--gold-light)}
#p1:checked ~ .row label[for=p1] .item,#p2:checked ~ .row label[for=p2] .item,#p3:checked ~ .row label[for=p3] .item{transform:translateY(0);opacity:1}
#p1:checked ~ .row label[for=p1] .glid,#p2:checked ~ .row label[for=p2] .glid,#p3:checked ~ .row label[for=p3] .glid{transform:translate(8px,-30px) rotate(-18deg)}
#p1:checked ~ .row label[for=p1] .leaf,#p2:checked ~ .row label[for=p2] .leaf,#p3:checked ~ .row label[for=p3] .leaf{transform:scaleX(.16)}
.gm.w1 #p1:checked ~ .win,.gm.w2 #p2:checked ~ .win,.gm.w3 #p3:checked ~ .win,
.gm.w1 #p2:checked ~ .bad,.gm.w1 #p3:checked ~ .bad,.gm.w2 #p1:checked ~ .bad,.gm.w2 #p3:checked ~ .bad,.gm.w3 #p1:checked ~ .bad,.gm.w3 #p2:checked ~ .bad{display:block;animation:pop .25s ease-out}
@keyframes pop{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}

/* quiz */
.qz{position:relative;margin-top:14px;text-align:left}
.qz .q{font-size:20px;font-weight:700;line-height:1.2}
.qz label{display:block;margin-top:8px;padding:11px 14px;border-radius:10px;box-shadow:inset 0 0 0 1.5px var(--gold);font-size:19px;line-height:1.25;cursor:pointer}
.qz input:checked + label.ok{background:var(--gold);color:var(--teal);font-weight:700}
.qz input:checked + label.ko{background:var(--red-dark)}
.qz input:focus-visible + label{outline:3px solid var(--cream-2)}
.qz .fb{display:none;margin-top:8px;font-size:18px;font-style:italic;color:var(--gold-light)}
.qz .fb.on{display:block}
.qz-score{margin-top:16px;font-family:var(--display);font-size:20px;color:var(--gold-light);min-height:1.2em}

/* memory */
.mm{margin-top:16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mm button{position:relative;height:84px;padding:0;border:0;background:none;perspective:400px;cursor:pointer}
.mm .cd{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .45s}
.mm .bk,.mm .fr{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:8px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mm .bk{background:var(--red);box-shadow:inset 0 0 0 2px var(--gold)}
.mm .fr{background:var(--cream);box-shadow:inset 0 0 0 2px var(--gold);transform:rotateY(180deg)}
.mm .bk svg{width:30px;height:30px}.mm .fr svg{width:46px;height:46px}
.mm .up .cd,.mm .done .cd{transform:rotateY(180deg)}
.mm .done .fr{box-shadow:inset 0 0 0 3px var(--teal),0 0 0 2px var(--gold-light)}
.mm-status{margin-top:12px;font-size:18px;font-weight:700;min-height:1.3em}

/* desideri */
.wy{position:relative;margin-top:12px}
.wy .path{position:relative;height:290px}
.wy .path svg.line{position:absolute;left:0;top:0;width:100%;height:290px}
.wy .star{position:absolute;z-index:1;margin-left:-24px;width:48px;height:48px;padding:0;border:0;background:none;cursor:pointer}
.wy .star svg{width:48px;height:48px;fill:rgba(246,217,138,.25);stroke:var(--gold-light);stroke-width:1.5;transition:fill .3s,transform .3s}
.wy .star[aria-pressed=true] svg{fill:var(--gold);transform:scale(1.2)}
.wy .wt{margin-top:8px;padding:10px 14px;border-radius:10px;background:rgba(246,217,138,.16);font-size:19px;font-style:italic}
.wy .wt[hidden]{display:none}

/* puzzle */
.pz{margin:16px auto 0;width:252px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:6px;background:var(--gold);border-radius:6px}
.pz button{aspect-ratio:735/615;padding:0;border:0;border-radius:2px;background-color:var(--cream);background-size:300% 300%;cursor:pointer}
.pz button.sel{box-shadow:inset 0 0 0 3px var(--cream-2),0 0 0 2px var(--teal)}
.pz.solved button{cursor:default}
.pz-status{margin-top:10px;font-size:18px;font-weight:700;min-height:1.3em}

/* attività */
.st{margin-top:8px}
.st label{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer;text-align:left;background:rgba(0,0,0,.18);transition:background .2s}
.st .bx{flex:0 0 auto;width:28px;height:28px;border:2px solid var(--gold-light);border-radius:6px;display:flex;align-items:center;justify-content:center}
.st .tk{width:18px;height:18px;opacity:0;transform:scale(.4);transition:all .2s}
.st .tx{font-size:19px;line-height:1.3}
.st input:checked + label{background:rgba(246,217,138,.16)}
.st input:checked + label .tk{opacity:1;transform:scale(1)}
.st input:checked + label .bx{background:var(--gold)}
.st input:checked + label .tx{text-decoration:line-through;opacity:.6}
.st input:focus-visible + label{outline:3px solid var(--cream-2)}
.done-msg{margin-top:12px;font-family:var(--display);font-size:19px;color:var(--gold-light)}
.done-msg[hidden]{display:none}
.fld{display:block;width:100%;border:0;border-radius:8px;background:var(--cream);box-shadow:inset 0 0 0 1.5px var(--gold);padding:12px 14px;font-family:var(--letter);font-size:19px;line-height:1.4;color:var(--ink);text-align:left;resize:vertical}
.fld:focus{outline:3px solid var(--cream-2)}
.counter{margin-top:4px;text-align:right;font-size:15px;color:var(--gold-light)}
.saved{margin-top:6px;font-size:16px;color:var(--gold-light);min-height:1.2em}

/* foto del giorno */
.photo-up{margin-top:14px}
.photo-up label.drop{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 14px;border:2px dashed var(--gold-light);border-radius:10px;font-size:19px;font-weight:700;cursor:pointer}
.photo-up label.drop svg{width:24px;height:24px}
.photos{margin-top:10px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.photos figure{position:relative;margin:0}
.photos img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;box-shadow:0 0 0 2px var(--gold)}
.photos button{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:18px;line-height:1;cursor:pointer}

/* finale */
.big-name{margin-top:8px;text-align:center;font-family:var(--display);line-height:1.1;color:var(--teal);-webkit-text-stroke:1.4px var(--gold-ink);paint-order:stroke fill;overflow-wrap:anywhere}
.dedica{margin-top:14px;padding:16px 14px;text-align:center;background:#FFF8E6;box-shadow:inset 0 0 0 1.5px var(--gold),inset 0 0 0 4px #FFF8E6,inset 0 0 0 5px rgba(184,138,42,.7)}
.dedica .k{font-size:13px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--red)}
.dedica .t{margin-top:8px;font-family:var(--letter);font-size:20px;line-height:1.4;font-style:italic;color:var(--ink);overflow-wrap:anywhere;white-space:pre-line}
.dedica .f{margin-top:8px;font-size:18px;font-weight:700;color:var(--teal);overflow-wrap:anywhere}
.ps{margin-top:6px;font-family:var(--letter);font-style:italic;font-size:17px;color:var(--ink)}
.dots{margin-top:14px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.dots a,.dots span{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:50%;font-family:var(--display);font-size:11px;text-decoration:none}
.dots a{background:var(--gold);border:1.5px solid var(--gold-dark);color:var(--teal)}
.dots span{border:1.5px solid rgba(246,217,138,.5);color:var(--gold-light)}
.my-letter{margin-top:16px;padding:14px;border-radius:8px;background:var(--cream);color:var(--ink);text-align:left;font-family:var(--letter);font-size:18px;line-height:1.45;white-space:pre-line}

/* anteprima amministratore */
.admin-bar{position:sticky;top:0;z-index:50;padding:6px 12px;background:#111;color:#fff;font:600 14px/1.3 system-ui,sans-serif;text-align:center}
.admin-bar a{color:#ffd76a}

/* pagine semplici (errore, landing) */
.simple{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.simple .h{font-family:var(--display);font-size:30px;line-height:1.15;color:var(--gold-light)}
.simple p{font-size:20px;font-style:italic;max-width:30ch}
.simple .portrait{position:relative;width:200px;height:170px}
.simple .portrait .chico{left:0;top:0;width:200px}

@media (prefers-reduced-motion:reduce){
  .chico,.chico-body,.chico-tongue,.hairL,.hairR,.tw,.tile.today,.disc{animation:none!important}
  .tile.locked.shake,.sealed .env-closed.shake{animation:none}
  .ap{animation:none!important}.ap-hA,.ap-seal,.ap-flap{opacity:0}.ap-bflap{transform:scaleY(-1);opacity:1}.ap-let{transform:translateY(-95px)}
  .gm label,.gm .glid,.gm .leaf,.gm .item,.mm .cd,.arm,.st label,.st .tk{transition:none}
  .gm .res{animation:none!important}
}

/* elementi solo telefono / solo schermo grande */
.d-inline,.d-arch{display:none}
@media (min-width:960px){
  .d-inline{display:inline}
  .d-arch{display:block}
  .m-arch{display:none}
  .hero .hero-text{flex:1 1 340px;min-width:0}
}
.hero .portrait{display:contents}
@media (min-width:960px){.hero .portrait{display:block}}
.simple .lead{text-align:center}
.simple .btn,.simple .btn-ghost{margin-left:auto;margin-right:auto}
.tile.ready:not(.today) .lab{font-size:12px;letter-spacing:1px}