/* Il sito di presentazione di ESKIT: lo stile dell'app (fondo scuro,
   cremisi, Cinzel e Inter dagli stessi file), pensato prima per il
   telefono. Le animazioni si spengono con "riduci gli effetti". */
@font-face{font-family:Cinzel;src:url(fonts/cinzel-latin.woff2) format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-latin.woff2) format('woff2');font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url(fonts/inter-latin-ext.woff2) format('woff2');font-weight:100 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--bg:#07070A;--bg2:#0D0D12;--panel:rgba(255,255,255,.045);--panel2:rgba(255,255,255,.08);--text:#F5F5F7;--muted:#A3A3AE;
  --acc:#DC143C;--acc2:#FF3B5C;--ok:#34D399;--line:rgba(255,255,255,.09);--r:18px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:16px/1.6 Inter,system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:var(--acc2)}
.contenitore{width:min(1120px,100% - 40px);margin-inline:auto}
section{padding:72px 0;position:relative}
.occhiello{font:700 .74rem Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--acc2);margin-bottom:12px}
h1,h2,h3{font-family:Cinzel,Georgia,serif;font-weight:800;letter-spacing:.04em;line-height:1.15}
h2{font-size:clamp(1.7rem,6vw,2.7rem);margin-bottom:16px}
h3{font-size:1.1rem;letter-spacing:.06em;margin-bottom:6px}
.sotto{color:var(--muted);font-size:1.05rem;max-width:60ch}
.grad{background:linear-gradient(135deg,#fff 20%,var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- barra in alto ---- */
.barra{position:fixed;inset:0 0 auto;z-index:20;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.barra.piena{background:rgba(7,7,10,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--line)}
.barra .contenitore{display:flex;align-items:center;gap:10px;height:60px}
.barra svg{width:28px;height:32px}
.barra b{font-family:Cinzel,serif;font-weight:800;letter-spacing:.14em}
.barra .prova{margin-left:auto;font:700 .82rem Inter,sans-serif;color:#fff;text-decoration:none;padding:8px 14px;border-radius:999px;
  background:linear-gradient(135deg,var(--acc),var(--acc2))}

/* ---- apertura ---- */
.apertura{min-height:100svh;display:flex;align-items:center;padding:96px 0 48px;overflow:hidden}
.apertura::before{content:"";position:absolute;inset:-20% -10% auto;height:90%;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 30%,rgba(220,20,60,.22),transparent 70%)}
.apertura .contenitore{display:grid;gap:40px;align-items:center}
.logo-grande{width:110px;height:122px;margin-bottom:22px;filter:drop-shadow(0 0 28px rgba(220,20,60,.55))}
.logo-grande .d20{transform-origin:37px 41px;animation:d20 9s ease-in-out infinite}
@keyframes d20{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-8deg) scale(1.03)}50%{transform:rotate(0) scale(1)}75%{transform:rotate(8deg) scale(1.03)}}
.apertura h1{font-size:clamp(2.4rem,11vw,4.6rem);margin-bottom:16px}
.apertura .sotto{font-size:1.12rem}
.pulsanti{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:10px;font:700 1rem Inter,sans-serif;text-decoration:none;border-radius:16px;padding:15px 22px;
  color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc2));box-shadow:0 12px 30px rgba(220,20,60,.35);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(220,20,60,.45)}
.btn.spento{background:var(--panel2);box-shadow:none;border:1px solid var(--line);color:var(--muted);cursor:default}
.btn.spento:hover{transform:none}
.btn svg{width:20px;height:20px}
.nota{font-size:.8rem;color:var(--muted);margin-top:14px}

/* il telefono con lo screenshot */
.telefono{position:relative;width:min(300px,78vw);margin-inline:auto;aspect-ratio:390/844;border-radius:42px;padding:10px;
  background:linear-gradient(145deg,#26262e,#101014);box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08),0 0 80px rgba(220,20,60,.18)}
.telefono img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:33px}
.telefono.piccolo{width:min(250px,70vw)}
.inclinato{transform:perspective(1200px) rotateY(-12deg) rotateX(4deg);transition:transform .6s}

/* ---- blocchi ---- */
.blocco{display:grid;gap:36px;align-items:center}
.elenco{list-style:none;display:grid;gap:14px;margin-top:22px}
.elenco li{display:flex;gap:12px;align-items:flex-start}
.elenco li::before{content:"";flex:0 0 22px;height:22px;margin-top:2px;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF3B5C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat,rgba(220,20,60,.14)}
.pannello{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px}

/* carta contro ESKIT */
.confronto{display:grid;gap:16px;margin-top:30px}
.lato{border-radius:22px;padding:24px;border:1px solid var(--line)}
.lato.carta{background:linear-gradient(160deg,#2a2419,#17140f);border-color:rgba(214,190,140,.18)}
.lato.carta h3{color:#E6D3A8}
.lato.eskit{background:linear-gradient(160deg,rgba(220,20,60,.16),rgba(255,255,255,.03));border-color:rgba(255,59,92,.3)}
.lato ul{list-style:none;display:grid;gap:12px;margin-top:14px}
.lato li{display:flex;gap:12px;align-items:flex-start;color:#DADAE0}
.lato li i{flex:0 0 28px;height:28px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-size:.95rem}
.carta li i{background:rgba(214,190,140,.12);color:#E6D3A8}
.eskit li i{background:rgba(220,20,60,.18);color:var(--acc2)}
.lato .tempo{margin-top:18px;font-size:.84rem;color:var(--muted)}

/* numeri del manuale */
.numeri{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:26px}
.numero{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px}
.numero b{display:block;font:800 clamp(1.8rem,8vw,2.6rem) Cinzel,serif;color:var(--text)}
.numero span{color:var(--muted);font-size:.86rem}

/* texture delle mappe */
.texture{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}
.texture div{aspect-ratio:1;border-radius:12px;background-size:cover;position:relative;overflow:hidden;border:1px solid var(--line)}
.texture span{position:absolute;inset:auto 0 0;padding:6px 8px;font-size:.72rem;font-weight:600;background:linear-gradient(transparent,rgba(0,0,0,.75))}

/* medaglie */
.medaglie{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-top:28px}
.medaglia{display:flex;flex-direction:column;align-items:center;gap:8px;width:96px;text-align:center}
.medaglia img{width:84px;height:84px}
.medaglia small{font-size:.74rem;color:var(--muted);line-height:1.3}

/* notizie */
.notizie{display:grid;gap:14px;margin-top:26px}
.notizia{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:6px}
.notizia time,.notizia .eti{font-size:.76rem;color:var(--acc2);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.notizia h3{font-family:Inter,sans-serif;letter-spacing:0;font-size:1.05rem;font-weight:700}
.notizia p{color:var(--muted);font-size:.92rem}
.evento{flex-direction:row;gap:14px;align-items:center}
.evento .data{flex:0 0 58px;height:62px;border-radius:14px;background:rgba(220,20,60,.14);display:flex;flex-direction:column;align-items:center;justify-content:center}
.evento .data b{font:800 1.4rem Cinzel,serif;line-height:1}
.evento .data span{font-size:.7rem;font-weight:700;color:var(--acc2)}

/* regole in regola e piè di pagina */
.licenza{font-size:.86rem;color:var(--muted);overflow-wrap:anywhere}
.licenza p+p{margin-top:10px}
footer{border-top:1px solid var(--line);padding:36px 0 48px;color:var(--muted);font-size:.88rem}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin:14px 0}
footer a{color:var(--text);text-decoration:none}
footer a:hover{color:var(--acc2)}

/* piccole regole di pagina (niente stili in linea: la CSP non li ammette) */
.centrato{text-align:center}
.centrato-blocco{margin-inline:auto}
.al-centro{justify-content:center}
.sotto.piccolo{font-size:.98rem}
.coppia{margin-top:56px}
.unico{display:block}
.titolo-404{font-size:clamp(2rem,9vw,3.4rem)}
.spazio-sotto{margin-bottom:26px}
.t-pietra{background-image:url(img/texture-pietra.webp)}.t-dungeon{background-image:url(img/texture-dungeon.webp)}
.t-erba{background-image:url(img/texture-erba.webp)}.t-sabbia{background-image:url(img/texture-sabbia.webp)}.t-neve{background-image:url(img/texture-neve.webp)}

/* comparsa allo scorrimento */
.appare{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.appare.visto{opacity:1;transform:none}
.ritardo1{transition-delay:.08s}.ritardo2{transition-delay:.16s}.ritardo3{transition-delay:.24s}

/* braci che salgono, come nell'app */
.braci{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.braci i{position:absolute;bottom:-10px;border-radius:50%;background:#FF6B3D;box-shadow:0 0 8px #FF3B5C;animation:sale linear infinite}
@keyframes sale{to{transform:translate(var(--dx),-110vh);opacity:0}}
main,header,footer{position:relative;z-index:1}

/* ---- dal tablet in su ---- */
@media (min-width:760px){
  section{padding:110px 0}
  .apertura .contenitore{grid-template-columns:1.1fr .9fr}
  .blocco{grid-template-columns:1fr 1fr;gap:64px}
  .blocco.inverso > :first-child{order:2}
  .confronto{grid-template-columns:1fr 1fr}
  .numeri{grid-template-columns:repeat(3,1fr)}
  .texture{grid-template-columns:repeat(5,1fr)}
  .notizie{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1100px){ .numeri{grid-template-columns:repeat(6,1fr)} }

/* ---- riduci gli effetti ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .appare{opacity:1;transform:none}
  .inclinato{transform:none}
  .braci{display:none}
}