@font-face{font-family:Outfit;font-weight:100 900;font-display:swap;src:url('./assets/fonts/outfit.ttf') format('truetype')}
@font-face{font-family:Caveat;font-weight:400 700;font-display:swap;src:url('./assets/fonts/caveat.ttf') format('truetype')}

*{box-sizing:border-box}
body{margin:0;min-width:280px;background:#eaf17f;color:#173c32;font-family:Outfit,sans-serif}
a{color:inherit;text-underline-offset:.2em}
a:focus-visible{outline:3px solid currentColor;outline-offset:6px}
p,h1{margin:0}
::selection{background:#f4ad8b;color:#173c32}
.wrap{max-width:1440px;min-height:100svh;margin:auto;padding:0 5vw;display:flex;flex-direction:column}
.top{display:flex;align-items:center;padding:1.5rem 0}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-size:2.3rem;line-height:1;font-weight:900;letter-spacing:-.04em}
.brand img{display:block;flex:none}
.glyph{font-size:1.4em;line-height:1;margin-left:-.5rem}
.a1{flex:1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:3rem;align-items:center;padding:2.5rem 0}
.h1{font-size:clamp(3rem,6vw,5.25rem);max-width:13ch;margin-bottom:1.5rem;font-weight:900;letter-spacing:-.04em;line-height:.99;text-wrap:balance}
.shh{display:inline-block;font-size:.8em;vertical-align:.04em;letter-spacing:normal}
.copy{font-size:1.25rem;line-height:1.5;max-width:35ch}
.copy p+p{margin-top:.8rem}
.action{display:flex;gap:.75rem;flex-wrap:wrap;max-width:360px;margin-top:1.7rem}
.cta{flex:1 1 150px;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:.8rem;min-height:54px;padding:.9rem 1.25rem;border:1.5px solid #173c32;border-radius:10px;background:#173c32;color:#fffdf3;text-decoration:none;font-size:1.1rem;font-weight:700;line-height:1.2}
.cta:hover{background:#2e5545}
.cta svg{width:21px;height:21px;flex:none}
.cta img{display:block;flex:none}
.cta-secondary{background:transparent;color:#173c32}
.cta-secondary:hover{background:#fffdf3}
.fine{font-size:.9rem;line-height:1.5;margin-top:1rem}
.mascot{margin:0;position:relative}
.marmot{display:block;width:100%;height:auto}
.mascot::after{content:"sssh.";position:absolute;top:0;right:8%;font-family:Caveat,sans-serif;font-size:4rem;transform:rotate(9deg)}
.foot{display:flex;justify-content:space-between;gap:1rem;padding:1.8rem 0;font-size:.85rem;line-height:1.5}
.foot a{text-decoration-thickness:1px}
.skip{position:fixed;z-index:5;left:1rem;top:-6rem;padding:.8rem 1rem;background:#173c32;color:#fffdf3}
.skip:focus{top:1rem}

@media(max-width:900px){
  .a1{gap:1rem}
  .mascot::after{font-size:3rem}
}
@media(max-width:700px){
  .wrap{padding:0 6vw}
  .top{padding:1.5rem 0}
  .brand{font-size:1.8rem}
  .brand img{width:40px;height:35px}
  .a1{grid-template-columns:1fr;padding:1.5rem 0 2rem;gap:2rem}
  .h1{font-size:clamp(2.8rem,11.4vw,4.5rem)}
  .copy{font-size:1.06rem;max-width:34ch}
  .copy p+p{margin-top:.75rem}
  .fine{font-size:.8rem}
  .mascot{max-width:310px;width:100%;justify-self:end}
  .mascot::after{font-size:3rem;top:-.3rem}
  .foot{display:grid;gap:.35rem;padding:1.5rem 0;font-size:.8rem}
}

.hero-character{position:relative;aspect-ratio:1;width:100%}
.hero-character .marmot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.hero-sprite{position:absolute;inset:0;background-image:var(--mascot-sheet);background-size:var(--mascot-size);background-repeat:no-repeat;background-position:0 var(--mascot-row)}
.hero-character[data-mascot=marmot] .hero-sprite,.hero-character:not([data-mascot=marmot]) .marmot{display:none}
.mascot-controls{display:flex;gap:.8rem;justify-content:flex-end;margin-top:.5rem;flex-wrap:wrap}
.mascot-controls button{display:inline-flex;gap:.4rem;align-items:center;min-height:44px;padding:.4rem .2rem;border:0;background:transparent;color:#173c32;font:500 .85rem Outfit,sans-serif;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.mascot-controls button:hover{text-decoration-thickness:2px}
.mascot-controls svg{width:17px;height:17px}
.mascot-controls button:focus-visible{outline:3px solid #173c32;outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
body.game-open{overflow:hidden}
.entry-shell{position:fixed;inset:0;z-index:100;background:#eaf17f;display:grid;place-items:center}
.entry-shell iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#eaf17f;opacity:0;pointer-events:none}
.entry-shell[data-ready=true] iframe{opacity:1;pointer-events:auto}
.entry-loading{padding:2rem;text-align:center;color:#173c32;font:600 1.2rem Outfit,sans-serif}
.entry-loading img{display:block;width:80px;height:auto;margin:0 auto 1rem;animation:entry-nod 1.2s ease-in-out infinite}
.entry-loading a{display:inline-block;margin-top:1rem}
.entry-shell[data-ready=true] .entry-loading{display:none}
@keyframes entry-nod{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(4deg)}}
@media(prefers-reduced-motion:reduce){.entry-loading img{animation:none}}

/* Il nome cambia, il tratto a penna resta. */
#mascot-name{position:relative;display:inline-block;isolation:isolate;padding-bottom:.08em}
#mascot-name::after{content:"";position:absolute;z-index:-1;left:-.025em;right:-.025em;bottom:.025em;height:.1em;border-bottom:.055em solid #d47649;border-radius:45% 40% 55% 35%;transform:rotate(-1.5deg)}
.hero-sprite{inset:auto;left:50%;bottom:3%;width:var(--mascot-width,100%);height:var(--mascot-height,100%);transform:translateX(-50%);background-position:var(--mascot-col,0%) var(--mascot-row,0%)}
.motion-toggle{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.motion-toggle:focus-visible{position:relative;clip-path:none;width:auto;height:auto;white-space:normal;padding:.6rem .8rem;background:#fffdf3;color:#173c32;font:inherit;border-radius:10px;outline:3px solid #173c32;outline-offset:3px}
.hero-character .m-fur{fill:#a77449}.hero-character .m-dark,.hero-character .m-tail{fill:#7b5233}.hero-character .m-belly{fill:#e4c69e}.hero-character .m-ear{fill:#c99569}.hero-character .m-cap{fill:#7b5233;opacity:.45}.hero-character .m-muzzle{fill:#f0dfc2}.hero-character .m-blush{fill:#e98a7a;opacity:.5}.hero-character .m-nose{fill:#3a2419}.hero-character .m-lips{fill:none;stroke:#3a2419;stroke-width:3;stroke-linecap:round}.hero-character .m-tooth{fill:#fffdf6;stroke:#3a2419;stroke-width:1.5}.hero-character .m-whiskers{fill:none;stroke:#3a2419;stroke-width:1.6;opacity:.45}
.hero-character .m-eyes-sleep path,.hero-character .m-eyes-half path{fill:none;stroke:#3a2419;stroke-width:4.5;stroke-linecap:round}.hero-character .m-eyes-half circle,.hero-character .m-eyes-open circle{fill:#3a2419}.hero-character .m-glint{fill:#fff}.hero-character .m-brows{fill:none;stroke:#3a2419;stroke-width:5.5;stroke-linecap:round}.hero-character .m-mouth-open{fill:#5a1f1a}.hero-character .m-hole{fill:#102b2420}
.hero-character .m-eyes-sleep,.hero-character .m-eyes-half,.hero-character .m-eyes-open,.hero-character .m-brows,.hero-character .m-mouth-open,.hero-character .m-zzz,.hero-character .m-bang{display:none}
.hero-character[data-pose=sleep] .m-eyes-sleep,.hero-character[data-pose=sleep] .m-zzz,.hero-character[data-pose=stir] .m-eyes-half,.hero-character[data-pose=grumpy] .m-eyes-open,.hero-character[data-pose=grumpy] .m-brows,.hero-character[data-pose=alert] .m-eyes-open,.hero-character[data-pose=alert] .m-brows,.hero-character[data-pose=alert] .m-mouth-open{display:inline}
.hero-character .m-zzz text{font:700 24px Outfit,sans-serif;fill:#70854c}