/* ============================================================
   mysociale.net — aggiunte al design per le parti dinamiche
   (news, eventi dal DB, account, profili). Usa i token di sociale.css.
   ============================================================ */

/* griglie e card */
@media (min-width:1100px){ .evgrid--3{ grid-template-columns:repeat(3,1fr) } }
.evcard__t a:hover{ color:var(--accent) }
a.evcard__img{ display:grid }
.badge--soon{ background:var(--gold); color:var(--ink) }
.badge--cat{ background:var(--surface-2); color:var(--accent); border-color:var(--line) }
a.badge--cat:hover{ border-color:var(--accent) }
.more-link{ margin-top:1.75rem }
.empty{ margin-top:2rem; font-size:1rem; color:var(--muted) }
.pager{ display:flex; align-items:center; justify-content:center; gap:1.5rem; margin-top:2.5rem; font-size:.875rem; color:var(--muted) }
.chipf small{ margin-left:.3rem; opacity:.6 }

/* titoli delle pagine di dettaglio (niente animazione a righe: testi lunghi) */
.page-h1{ max-width:22ch; font-family:'Fredoka','Nunito',sans-serif; font-size:2.1rem; font-weight:700; line-height:1.08; letter-spacing:-.012em; color:var(--hero-ink, #fff) }
@media (min-width:640px){ .page-h1{ font-size:2.6rem } }
@media (min-width:1024px){ .page-h1{ font-size:3rem } }
.phero .updated a{ text-decoration:underline; text-underline-offset:.15em }

/* dettaglio evento */
.evmeta{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; font-size:.9375rem; font-weight:700; color:var(--hero-muted, #C9D5FF) }
.evmeta span{ display:inline-flex; align-items:center; gap:.45rem }
.evmeta .icon{ width:1.1rem; height:1.1rem; color:var(--gold) }
.detail{ display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:start }
@media (min-width:1024px){ .detail{ grid-template-columns:1.4fr .9fr; gap:4rem } }
.detail__main{ display:flex; flex-direction:column; gap:2rem }
.detail__list{ font-size:1rem; gap:.6rem }
.detail__side{ display:flex; flex-direction:column; gap:1.5rem }
@media (min-width:1024px){ .detail__side{ position:sticky; top:7rem } }
.people__k{ font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--accent) }
.people__list{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem }
.person{ width:2.6rem; height:2.6rem; border-radius:50%; border:2px solid var(--ink); background:var(--surface-2); display:grid; place-items:center; overflow:hidden; font-family:'Fredoka',sans-serif; font-weight:700; color:var(--ink) }
.person img{ width:100%; height:100%; object-fit:cover }
.person:hover{ transform:translateY(-2px) }

/* iscrizione agli eventi */
.rsvp{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin-top:.9rem }
.rsvp__btn:disabled{ opacity:.6; cursor:wait }
.rsvp__count{ display:inline-flex; align-items:center; gap:.4rem; font-size:.875rem; font-weight:700; color:var(--muted) }
.rsvp__count .icon{ width:1.1rem; height:1.1rem; color:var(--accent) }
.rsvp__note{ flex-basis:100%; font-size:.8125rem; color:var(--accent); font-weight:700 }
.rsvp__note:empty{ display:none }
.rsvp.is-going .pill__in{ background:#3BE38B }

/* articolo */
.article-body{ margin-inline:auto; font-size:1.0625rem }
.article-body img{ max-width:100%; height:auto; border-radius:1.25rem; border:2px solid var(--ink); box-shadow:0 .35rem 0 var(--ink) }
.article-body code, .prose code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; background:var(--surface-2); border-radius:.4rem; padding:.1em .35em; color:var(--ink) }
.article-body pre{ background:var(--ink); color:#fff; border-radius:1rem; padding:1rem 1.25rem; overflow:auto }
.article-body pre code{ background:none; color:inherit; padding:0 }
.prose h1{ font-size:1.9rem; font-weight:700 }
.tags{ max-width:42rem; margin:2rem auto 0; display:flex; flex-wrap:wrap; gap:.5rem }
.tag{ font-size:.8125rem; font-weight:700; color:var(--accent); background:var(--surface); border:1px solid var(--line); border-radius:9999px; padding:.3rem .8rem }

/* login con Google / Discord (inserito da app.js) */
.oauth{ display:flex; flex-direction:column; gap:.6rem; margin:1rem 0 .4rem }
.oauth__btn{ display:flex; align-items:center; justify-content:center; gap:.7rem; padding:.8rem 1rem; border:2px solid var(--ink); border-radius:9999px; background:#fff; font-weight:800; font-size:.9375rem; box-shadow:0 .2rem 0 var(--ink); transition:transform .15s }
.oauth__btn:hover{ transform:translateY(-2px) }
.oauth__btn svg{ width:1.25rem; height:1.25rem }
.oauth__or{ display:flex; align-items:center; gap:.8rem; margin-top:.6rem; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--subtle) }
.oauth__or::before, .oauth__or::after{ content:""; flex:1; height:1px; background:var(--line) }

/* account e profili */
.account{ display:flex; flex-direction:column; gap:1.5rem }
.account__grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:start }
@media (min-width:1024px){ .account__grid{ grid-template-columns:1.1fr .9fr; gap:2rem } }
.account__side{ display:flex; flex-direction:column; gap:1.5rem }
.account .authcard{ border:2px solid var(--ink); box-shadow:0 .35rem 0 var(--ink) }
.account .authcard form{ margin-top:1rem }
.account__id{ display:flex; gap:1.1rem; align-items:center }
.account__avatar-actions, .account__row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem }
.avatar{ width:3.5rem; height:3.5rem; flex:none; border-radius:50%; border:2px solid var(--ink); background:var(--gold); display:grid; place-items:center; overflow:hidden; font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.4rem; color:var(--ink) }
.avatar img{ width:100%; height:100%; object-fit:cover }
.avatar--lg{ width:5.5rem; height:5.5rem; font-size:2.2rem; box-shadow:0 .3rem 0 var(--ink) }
.role-tag{ text-transform:uppercase; font-size:.7rem; letter-spacing:.08em; color:var(--accent) }
.minibtn{ display:inline-flex; align-items:center; font-size:.8125rem; font-weight:800; padding:.45rem .95rem; border-radius:9999px; border:2px solid var(--ink); background:var(--ink); color:#fff }
.minibtn:hover{ background:var(--accent); border-color:var(--accent) }
.minibtn--ghost{ background:#fff; color:var(--ink) }
.minibtn--ghost:hover{ background:var(--surface); color:var(--ink); border-color:var(--ink) }
.minibtn--danger{ background:#C2410C; border-color:#C2410C }
.minibtn:disabled{ opacity:.6 }
.field textarea{ font:inherit }
.plainlist{ display:flex; flex-direction:column; gap:.6rem; margin-top:1rem; font-size:.9375rem }
.plainlist a{ font-weight:700; color:var(--ink) }
.plainlist a:hover{ color:var(--accent) }
.plainlist small{ display:block; color:var(--subtle); font-size:.8125rem }
.linked{ display:flex; flex-direction:column; gap:.6rem; margin-top:.8rem }
.linked__row{ display:flex; justify-content:space-between; align-items:center; font-weight:700 }
.danger{ margin-top:1.25rem; border-top:1px solid var(--line); padding-top:1rem }
.danger summary{ cursor:pointer; font-size:.8125rem; font-weight:700; color:#C2410C }
.profile__head{ display:flex; align-items:center; gap:1.25rem }
.profile__meta{ margin-top:.4rem; font-size:.9375rem; color:var(--hero-muted, #C9D5FF) }

/* avviso password xat (registrazione) */
.alert--warn{ background:#FFF6DB; border-color:#F2C94C; color:var(--ink) }
.alert--warn .alert__i{ background:var(--gold); color:var(--ink) }
.alert--warn p{ font-size:.875rem; line-height:1.55; color:var(--ink) }

/* pagine legali */
.legal{ display:grid; grid-template-columns:1fr; gap:2rem; align-items:start }
@media (min-width:1024px){ .legal{ grid-template-columns:15rem 1fr; gap:4rem } .legal__toc{ position:sticky; top:7rem } }
.legal__toc{ background:var(--surface); border:1px solid var(--line); border-radius:1.25rem; padding:1.25rem 1.4rem }
.legal__k{ font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--accent) }
.legal__toc ol{ list-style:decimal; padding-left:1.1rem; margin-top:.8rem; display:flex; flex-direction:column; gap:.45rem; font-size:.875rem; color:var(--muted) }
.legal__toc a:hover{ color:var(--accent) }
.legal__body{ max-width:46rem }
.legal__body h2{ scroll-margin-top:6rem }
.legal__body table{ display:block; overflow-x:auto; font-size:.875rem }
.legal__body td, .legal__body th{ vertical-align:top; color:var(--muted) }
.legal__body th{ color:var(--ink); font-weight:800 }
.legal__body a.minibtn{ color:#fff; text-decoration:none }

/* chat xat senza consenso: spiegazione sotto il pulsante */
.chatbox__consent{ max-width:44ch; font-size:.8125rem !important; color:rgba(255,255,255,.7) !important }
.chatbox__consent a{ color:var(--gold); text-decoration:underline }

/* banner cookie */
.cc{ position:fixed; z-index:120; left:1rem; bottom:1rem; width:min(27rem, calc(100vw - 2rem)); max-height:calc(100vh - 2rem); overflow:auto;
  background:#fff; color:var(--ink); border:2px solid var(--ink); border-radius:1.25rem; box-shadow:0 .4rem 0 var(--ink); padding:1.25rem 1.25rem 1.1rem;
  font-family:'Nunito',sans-serif; font-size:15px; line-height:1.5; animation:ccIn .35s ease-out }
@keyframes ccIn{ from{ transform:translateY(1rem); opacity:0 } }
.cc__t{ font-family:'Fredoka',sans-serif; font-size:20px; font-weight:700; padding-right:2rem }
.cc__p{ margin-top:.5rem; font-size:14px; color:var(--muted) }
.cc__p a{ color:var(--accent); font-weight:700; text-decoration:underline }
.cc__x{ position:absolute; top:.6rem; right:.7rem; width:2rem; height:2rem; border-radius:50%; font-size:22px; line-height:1; color:var(--muted) }
.cc__x:hover{ background:var(--surface) }
.cc__prefs{ margin-top:.9rem; display:flex; flex-direction:column; gap:.6rem }
.cc__row{ display:flex; gap:.8rem; justify-content:space-between; align-items:flex-start; background:var(--surface); border-radius:.9rem; padding:.7rem .85rem; cursor:pointer }
.cc__row b{ display:block; font-size:14px }
.cc__row small{ display:block; font-size:12.5px; color:var(--muted); line-height:1.45 }
.cc__row input{ margin-top:.2rem; width:1.15rem; height:1.15rem; accent-color:var(--accent); flex:none }
.cc__btns{ margin-top:1rem; display:grid; grid-template-columns:1fr 1fr; gap:.5rem }
.cc__b{ font-weight:800; font-size:14px; padding:.65rem .8rem; border-radius:9999px; border:2px solid var(--ink); background:#fff; color:var(--ink) }
.cc__b:hover{ background:var(--surface) }
.cc__b--main{ background:var(--ink); color:#fff }
.cc__b--wide{ grid-column:1 / -1 }
.cc__b--main:hover{ background:var(--accent); border-color:var(--accent) }
@media (max-width:1023px){ .cc{ bottom:5.25rem } }
.cc__prefs[hidden]{ display:none }

/* captcha Cloudflare Turnstile: vuoto finche' non serve un clic */
.captcha:empty{ display:none }
.captcha{ min-height:0 }

/* staff: badge dei moderatori */
.member__r--mod{ background:#DDF7E8; color:#11683C }

/* ============================================================ Super Powers */
.spsteps{ display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:2.5rem }
@media (min-width:768px){ .spsteps{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1100px){ .spsteps{ grid-template-columns:repeat(4,1fr) } }
.spsteps .step3{ border:2px solid var(--ink); box-shadow:0 .3rem 0 var(--ink) }

.sptiers{ display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; margin-top:2rem }
@media (min-width:900px){ .sptiers{ grid-template-columns:repeat(6,1fr) } }
.sptier{ display:flex; flex-direction:column; gap:.15rem; border:2px solid var(--ink); border-radius:1.1rem; box-shadow:0 .3rem 0 var(--ink); padding:1rem 1.1rem; background:#fff }
.sptier__n{ font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em }
.sptier b{ font-family:'Fredoka',sans-serif; font-size:1.6rem; line-height:1.1 }
.sptier small{ font-size:.8rem; color:var(--muted); font-weight:700 }
.sptier--bronze{ background:#F6E3D3 } .sptier--silver{ background:#E9EDF5 } .sptier--gold{ background:#FFE7A3 }
.sptier--diamond{ background:#D8F3FF } .sptier--secret{ background:#E7DDFF } .sptier--troll{ background:#DDF7E8 }

.spcat{ margin-top:1rem }
.spgrid{ display:grid; grid-template-columns:1fr; gap:1rem; margin-top:1.1rem }
@media (min-width:700px){ .spgrid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1100px){ .spgrid{ grid-template-columns:repeat(3,1fr) } }
.spcard{ display:flex; gap:1rem; align-items:flex-start; background:#fff; border:2px solid var(--ink); border-radius:1.25rem; box-shadow:0 .3rem 0 var(--ink); padding:1rem }
.spcard__img{ width:5rem; height:5rem; flex:none; border-radius:1rem; border:2px solid var(--ink); background:#0B1150 }
.spcard__in{ min-width:0; flex:1 }
.spcard__t{ font-family:'Fredoka',sans-serif; font-size:1.15rem; font-weight:700; line-height:1.2; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem }
.spcard__d{ margin-top:.3rem; font-size:.875rem; line-height:1.5; color:var(--muted) }
.sptag{ font-family:'Nunito',sans-serif; font-size:.625rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; background:#DDF7E8; color:#11683C; border-radius:9999px; padding:.15rem .5rem }
.spcard__lv{ display:grid; grid-template-columns:repeat(4,1fr); gap:.3rem; margin-top:.7rem }
.spcard__lv li{ display:flex; flex-direction:column; align-items:center; border-radius:.6rem; padding:.3rem .2rem; font-size:.625rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted) }
.spcard__lv li b{ font-size:.875rem; color:var(--ink); letter-spacing:0; font-family:'Fredoka',sans-serif }
.spcard__lv .is-bronze{ background:#F6E3D3 } .spcard__lv .is-silver{ background:#E9EDF5 } .spcard__lv .is-gold{ background:#FFE7A3 } .spcard__lv .is-diamond{ background:#D8F3FF }
.spsecret{ display:flex; gap:1.25rem; align-items:center; margin-top:2rem; background:#0B1150; color:#fff; border:2px solid var(--ink); border-radius:1.5rem; box-shadow:0 .35rem 0 var(--ink); padding:1.25rem 1.5rem }
.spsecret img{ width:5.5rem; height:5.5rem; border-radius:1rem; flex:none }
.spsecret h3{ font-size:1.35rem }
.spsecret p{ margin-top:.3rem; color:#C9D5FF; font-size:.9375rem; line-height:1.55 }

.spskills{ display:grid; grid-template-columns:1fr; gap:.9rem; margin-top:2rem }
@media (min-width:700px){ .spskills{ grid-template-columns:repeat(3,1fr) } }
.spskill{ display:flex; flex-direction:column; gap:.2rem; background:#fff; border:1px solid var(--line); border-radius:1rem; padding:1rem 1.1rem }
.spskill b{ font-family:'Fredoka',sans-serif; font-size:1.1rem }
.spskill span{ font-size:.875rem; color:var(--muted) }

/* classifica live */
.splb{ margin-top:2rem; background:#fff; border:2px solid var(--ink); border-radius:1.5rem; box-shadow:0 .35rem 0 var(--ink); overflow:hidden }
.splb__head{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; padding:.9rem 1.2rem; background:var(--surface); border-bottom:2px solid var(--ink); font-size:.8125rem; font-weight:700; color:var(--muted) }
.splb__list{ display:flex; flex-direction:column }
.splb__row{ display:grid; grid-template-columns:2.4rem 1fr auto; align-items:center; gap:.8rem; padding:.75rem 1.2rem; border-top:1px solid var(--line) }
.splb__row:first-child{ border-top:0 }
@media (min-width:700px){ .splb__row{ grid-template-columns:2.4rem 1fr auto 5.5rem } }
.splb__pos{ width:2.2rem; height:2.2rem; border-radius:50%; display:grid; place-items:center; font-family:'Fredoka',sans-serif; font-weight:700; background:var(--surface-2); border:2px solid var(--line) }
.splb__row.is-1 .splb__pos{ background:#FF5C7A; color:#fff; border-color:var(--ink) }
.splb__row.is-2 .splb__pos{ background:var(--gold); border-color:var(--ink) }
.splb__row.is-3 .splb__pos{ background:#9B6BFF; color:#fff; border-color:var(--ink) }
.splb__who{ min-width:0; display:flex; flex-direction:column }
.splb__who b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.splb__who small{ font-size:.75rem; color:var(--subtle); font-weight:600 }
.splb__badges{ display:none; gap:.25rem }
@media (min-width:700px){ .splb__badges{ display:flex } }
.splb__badges img{ width:2rem; height:2rem; border-radius:.5rem; border:1.5px solid var(--ink) }
.splb__pts{ text-align:right; font-size:.8125rem; color:var(--muted); font-weight:700; white-space:nowrap }
.splb__pts b{ font-family:'Fredoka',sans-serif; font-size:1.25rem; color:var(--ink) }
.splb__foot{ padding:.8rem 1.2rem; font-size:.8125rem; color:var(--muted); background:var(--surface); border-top:2px solid var(--line) }
.splb__foot a{ color:var(--accent); font-weight:700 }

/* risposte FAQ dal pannello admin (Markdown -> HTML) */
div.faq__a p + p{ margin-top:.6rem }
div.faq__a a{ color:var(--accent); font-weight:700; text-decoration:underline; text-underline-offset:.15em }

/* staff: dettagli xat dal pannello admin */
.member__av--img{ overflow:hidden; padding:0 }
.member__av--img img{ width:100%; height:100%; object-fit:cover; border-radius:50% }
.member__x{ display:flex; flex-wrap:wrap; justify-content:center; gap:.3rem .5rem; font-size:.75rem; font-weight:700; color:var(--muted) }
.member__bio{ font-size:.8125rem; line-height:1.5; color:var(--muted); max-width:28ch }
.member__meta{ font-size:.75rem; color:var(--subtle); font-weight:600 }
.member__link{ font-size:.75rem; font-weight:800; color:var(--accent); text-decoration:underline; text-underline-offset:.15em }
.member__r--helper{ background:#FFF1D6; color:#8A5A00 }
.member__r--bot{ background:#EDE7FF; color:#5B3CC4 }

/* articoli dall'editor visuale: foto piccole, a sinistra, a destra */
.article-body::after{ content:""; display:block; clear:both }
.article-body img{ display:block; margin-inline:auto }
.article-body img.img-small{ max-width:50% }
.article-body img.img-left{ float:left; max-width:45%; margin:.3rem 1.5rem 1rem 0 }
.article-body img.img-right{ float:right; max-width:45%; margin:.3rem 0 1rem 1.5rem }
.article-body hr{ border:0; border-top:2px solid var(--line); margin:2rem 0 }
.article-body u{ text-underline-offset:.15em }
@media (max-width:640px){ .article-body img.img-left, .article-body img.img-right{ float:none; max-width:100%; margin:1rem auto } }
.article-body strong{ font-weight:800 }

/* ============================================================ Sociale Card */
.lcard{ position:relative; overflow:hidden; aspect-ratio:1.586/1; width:100%; max-width:30rem; border-radius:1.5rem; border:2px solid var(--ink); box-shadow:0 .45rem 0 var(--ink); padding:1.4rem 1.5rem; display:flex; flex-direction:column; color:#fff;
  background:radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.28), transparent 45%), var(--cg, linear-gradient(135deg,#B8703A,#7A3F17)) }
.lcard::after{ content:""; position:absolute; right:-3rem; bottom:-4rem; width:14rem; height:14rem; border-radius:50%; border:1.2rem solid rgba(255,255,255,.08) }
.lcard--bronze{ --cg:linear-gradient(135deg,#C98A4B 0%,#8A4A1F 100%) }
.lcard--silver{ --cg:linear-gradient(135deg,#9DB0CC 0%,#51607D 100%) }
.lcard--gold{ --cg:linear-gradient(135deg,#FFD24D 0%,#E08A00 100%); color:#2A1A00 }
.lcard--diamond{ --cg:linear-gradient(135deg,#6FE3FF 0%,#3B6BFF 55%,#7C4DFF 100%) }
.lcard__top{ display:flex; justify-content:space-between; align-items:center }
.lcard__brand{ display:inline-flex; align-items:center; gap:.45rem; font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.2rem }
.lcard__brand .icon{ width:1.7rem; height:1.7rem }
.lcard__brand small{ font-family:'Nunito',sans-serif; font-size:.65rem; font-weight:800; letter-spacing:.2em; opacity:.8 }
.lcard__tier{ font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; border:2px solid currentColor; border-radius:9999px; padding:.2rem .7rem }
.lcard__pts{ margin-top:auto; display:flex; align-items:baseline; gap:.5rem }
.lcard__pts b{ font-family:'Fredoka',sans-serif; font-size:3rem; line-height:1 }
.lcard__pts span{ font-weight:800; opacity:.85 }
.lcard__bar{ height:.5rem; border-radius:9999px; background:rgba(0,0,0,.18); margin-top:.6rem; overflow:hidden }
.lcard__bar i{ display:block; height:100%; background:currentColor; border-radius:inherit }
.lcard__next{ font-size:.8rem; font-weight:700; margin-top:.35rem; opacity:.9 }
.lcard__bot{ display:flex; gap:1.2rem; margin-top:.9rem; font-weight:800; font-size:.9rem; position:relative; z-index:1 }
.lcard__bot small{ display:block; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; opacity:.7 }
.phero .lcard--demo{ margin-left:auto; transform:rotate(-3deg) }

.cardpage{ display:flex; flex-direction:column; gap:1.5rem }
.cardpage .authcard{ border:2px solid var(--ink); box-shadow:0 .35rem 0 var(--ink) }
.cardpage__top{ display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:stretch }
@media (min-width:900px){ .cardpage__top{ grid-template-columns:auto 1fr } }
.cardpage__cols{ display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:start }
@media (min-width:900px){ .cardpage__cols{ grid-template-columns:1fr 1fr } }
.cardpage__today{ display:flex; flex-direction:column; gap:.6rem; justify-content:center }
.checkin{ align-self:flex-start; font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.3rem; padding:.8rem 2.2rem; border-radius:9999px; border:2px solid var(--ink); background:var(--gold); color:var(--ink); box-shadow:0 .3rem 0 var(--ink); cursor:pointer }
.checkin:disabled{ background:#DDF7E8; cursor:default }
.checkin:not(:disabled):hover{ transform:translateY(-2px) }
.streak{ font-size:.9375rem; color:var(--muted) }
.earn{ display:flex; flex-direction:column; margin-top:1rem }
.earn__i{ display:grid; grid-template-columns:3.5rem 1fr auto; gap:1rem; align-items:center; padding:.8rem 0; border-top:1px solid var(--line) }
.earn__pts{ display:grid; place-items:center; width:3.2rem; height:3.2rem; border-radius:1rem; border:2px solid var(--ink); background:var(--gold); font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.05rem; color:var(--ink) }
.earn__i.is-done .earn__pts, .earn__i.is-done_today .earn__pts{ background:#DDF7E8 }
.earn__txt{ display:flex; flex-direction:column; gap:.15rem }
.earn__txt small{ font-size:.8125rem; color:var(--muted) }
.earn__how a{ color:var(--accent); font-weight:700 }
.earn__go{ display:flex; flex-direction:column; align-items:flex-end; gap:.3rem }
.earn__ok{ font-size:.8125rem; font-weight:800; color:#11683C; white-space:nowrap }
.earn__lim{ font-size:.75rem; font-weight:700; color:var(--subtle); white-space:nowrap }
.rewards{ display:grid; grid-template-columns:1fr; gap:1rem; margin-top:1rem }
@media (min-width:700px){ .rewards{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1100px){ .rewards{ grid-template-columns:repeat(3,1fr) } }
.reward{ display:flex; flex-direction:column; border:2px solid var(--ink); border-radius:1.25rem; overflow:hidden; background:#fff }
.reward img{ width:100%; aspect-ratio:2/1; object-fit:cover; border-bottom:2px solid var(--ink); background:var(--sky-3) }
.reward__in{ padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.4rem; flex:1 }
.reward h3{ font-size:1.15rem }
.reward p{ font-size:.875rem; color:var(--muted); line-height:1.5 }
.reward__foot{ margin-top:auto; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; padding-top:.4rem }
.reward__foot b{ font-family:'Fredoka',sans-serif; font-size:1.2rem }
.reward__foot small{ font-size:.75rem; color:var(--subtle); font-weight:700 }
.reward__foot .minibtn{ margin-left:auto }
.minibtn:disabled{ background:var(--surface-2); border-color:var(--line); color:var(--muted); cursor:default }
.ledger{ display:flex; flex-direction:column; margin-top:.8rem; max-height:28rem; overflow:auto }
.ledger li{ display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-top:1px solid var(--line) }
.ledger li span{ display:flex; flex-direction:column }
.ledger small{ font-size:.75rem; color:var(--subtle) }
.ledger em{ font-style:normal; font-family:'Fredoka',sans-serif; font-weight:700; color:#11683C; white-space:nowrap }
.ledger em.is-neg{ color:#C2410C }
.earngrid{ display:grid; grid-template-columns:1fr; gap:1rem; margin-top:2rem }
@media (min-width:700px){ .earngrid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1100px){ .earngrid{ grid-template-columns:repeat(4,1fr) } }
.earncard{ background:#fff; border:2px solid var(--ink); border-radius:1.25rem; box-shadow:0 .3rem 0 var(--ink); padding:1.2rem; display:flex; flex-direction:column; gap:.5rem }
.earncard h3{ font-size:1.1rem }
.earncard p{ font-size:.875rem; color:var(--muted); line-height:1.5 }
.tiers{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:2rem }
@media (min-width:900px){ .tiers{ grid-template-columns:repeat(4,1fr) } }
.tierbox{ border:2px solid var(--ink); border-radius:1.25rem; box-shadow:0 .3rem 0 var(--ink); padding:1.2rem; color:#fff; background:var(--cg); display:flex; flex-direction:column; gap:.2rem }
.tierbox b{ font-family:'Fredoka',sans-serif; font-size:1.5rem }
.tierbox span{ font-weight:800 }
.tierbox small{ opacity:.85 }
.cardteaser{ display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; border-radius:1.25rem; border:2px solid var(--ink); box-shadow:0 .3rem 0 var(--ink); background:linear-gradient(135deg,#FFD24D,#E08A00); color:#2A1A00; font-weight:800 }
.cardteaser b{ font-family:'Fredoka',sans-serif; font-size:1.3rem }
.cardteaser span{ margin-left:auto }
.ms-toast{ position:fixed; z-index:130; left:50%; bottom:6rem; transform:translateX(-50%); background:var(--ink); color:#fff; font-weight:800; padding:.7rem 1.2rem; border-radius:9999px; box-shadow:0 .3rem 0 var(--gold); animation:ccIn .3s ease-out }
@media (min-width:1024px){ .ms-toast{ bottom:2rem } }

/* ============================================================ Il mio account */
.acc-hero__in{ display:grid; grid-template-columns:1fr; gap:2rem; padding:6.5rem 1.25rem 2.5rem; align-items:center }
@media (min-width:640px){ .acc-hero__in{ padding-left:2rem; padding-right:2rem } }
@media (min-width:1024px){ .acc-hero__in{ grid-template-columns:1fr 26rem; padding-top:8rem; padding-bottom:3rem; gap:3rem } }
.acc-id__row{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap }
.acc-avatar{ position:relative; width:7.5rem; height:7.5rem; border-radius:50%; border:4px solid #fff; background:var(--gold); color:var(--ink); display:grid; place-items:center; font-family:'Fredoka',sans-serif; font-weight:700; font-size:3rem; box-shadow:0 .4rem 0 rgba(0,0,0,.35); cursor:pointer; padding:0; flex:none }
.acc-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50% }
.acc-avatar i{ position:absolute; right:-.2rem; bottom:.1rem; width:2.3rem; height:2.3rem; border-radius:50%; background:#fff; border:2px solid var(--ink); display:grid; place-items:center; font-style:normal; font-size:1rem; transition:transform .15s }
.acc-avatar:hover i{ transform:scale(1.12) }
.acc-id__txt h1{ font-family:'Fredoka',sans-serif; font-size:2.3rem; font-weight:700; line-height:1.05; color:#fff }
@media (min-width:1024px){ .acc-id__txt h1{ font-size:3rem } }
.acc-id__txt p{ margin-top:.4rem; color:var(--hero-muted); font-size:.9375rem }
.acc-role{ color:var(--gold); text-transform:uppercase; font-size:.75rem; letter-spacing:.1em }
.acc-id__links{ display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; margin-top:.8rem; font-size:.875rem; font-weight:800 }
.acc-id__links a, .acc-id__links button{ color:#fff; text-decoration:underline; text-underline-offset:.2em; background:none; border:0; padding:0; font:inherit; cursor:pointer }
.acc-id__links a:hover, .acc-id__links button:hover{ color:var(--gold) }
.acc-card{ display:block; transition:transform .2s }
.acc-card .lcard{ margin-left:auto; transform:rotate(-2deg) }
.acc-card:hover{ transform:translateY(-4px) }

.acc-sec{ padding-top:2.5rem }
.acc-body{ display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:start }
@media (min-width:1024px){ .acc-body{ grid-template-columns:15rem 1fr; gap:2.5rem } }
.acc-nav{ display:flex; gap:.4rem; overflow-x:auto; padding-bottom:.3rem; scrollbar-width:none }
@media (min-width:1024px){ .acc-nav{ flex-direction:column; position:sticky; top:6.5rem; overflow:visible } }
.acc-nav__i{ display:flex; align-items:center; gap:.65rem; white-space:nowrap; font:inherit; font-weight:800; font-size:.9375rem; color:var(--ink); background:#fff; border:2px solid var(--line); border-radius:9999px; padding:.55rem 1rem; cursor:pointer; text-align:left }
@media (min-width:1024px){ .acc-nav__i{ border-radius:1rem; padding:.75rem 1rem } }
.acc-nav__i .icon{ width:1.15rem; height:1.15rem; color:var(--accent); flex:none }
.acc-nav__i:hover{ border-color:var(--ink) }
.acc-nav__i.is-on{ background:var(--ink); border-color:var(--ink); color:#fff; box-shadow:0 .25rem 0 var(--gold) }
.acc-nav__i.is-on .icon{ color:var(--gold) }
.acc-nav__i.is-danger{ color:#C2410C } .acc-nav__i.is-danger .icon{ color:#C2410C }
.acc-nav__i.is-danger.is-on{ background:#C2410C; border-color:#C2410C; color:#fff; box-shadow:none } .acc-nav__i.is-danger.is-on .icon{ color:#fff }
.acc-nav__i em{ margin-left:auto; font-style:normal; font-size:.75rem; background:var(--gold); color:var(--ink); border-radius:9999px; padding:.05rem .5rem }
.acc-main{ display:flex; flex-direction:column; gap:1.5rem; min-width:0 }
.acc-panel{ background:#fff; border:2px solid var(--ink); border-radius:1.5rem; box-shadow:0 .35rem 0 var(--ink); padding:1.5rem }
@media (min-width:640px){ .acc-panel{ padding:1.75rem 2rem } }
.acc-panel__head{ margin-bottom:1.1rem }
.acc-panel__head h2{ font-family:'Fredoka',sans-serif; font-size:1.5rem; font-weight:700 }
.acc-panel__head p{ margin-top:.25rem; font-size:.9375rem; color:var(--muted) }
.acc-form{ display:flex; flex-direction:column; gap:1.1rem }
.acc-form--row{ max-width:32rem }
.acc-avrow{ display:flex; align-items:center; gap:1.2rem; margin-bottom:1.4rem; padding-bottom:1.4rem; border-bottom:1px solid var(--line) }
.acc-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem }
@media (min-width:900px){ .acc-stats{ grid-template-columns:repeat(4,1fr) } }
.acc-stat{ display:flex; flex-direction:column; gap:.1rem; text-align:left; font:inherit; color:var(--ink); background:#fff; border:2px solid var(--ink); border-radius:1.25rem; box-shadow:0 .3rem 0 var(--ink); padding:1rem 1.1rem; cursor:pointer; transition:transform .15s }
.acc-stat:hover{ transform:translateY(-2px) }
.acc-stat small{ font-size:.6875rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--muted) }
.acc-stat b{ font-family:'Fredoka',sans-serif; font-size:1.9rem; line-height:1.15 }
.acc-stat span{ font-size:.8125rem; color:var(--subtle); font-weight:700 }
.acc-steps{ display:flex; flex-direction:column }
.acc-steps li{ display:flex; align-items:center; gap:.9rem; padding:.75rem 0; border-top:1px solid var(--line) }
.acc-steps li:first-child{ border-top:0 }
.acc-steps__c{ width:1.7rem; height:1.7rem; flex:none; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; font-weight:800; font-size:.85rem }
.acc-steps li.is-done .acc-steps__c{ background:#3BE38B; border-color:var(--ink); color:var(--ink) }
.acc-steps__t{ flex:1; font-weight:700 }
.acc-steps li.is-done .acc-steps__t{ color:var(--subtle); text-decoration:line-through }
.acc-events{ display:flex; flex-direction:column }
.acc-events li{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 0; border-top:1px solid var(--line) }
.acc-events li:first-child{ border-top:0 }
.acc-events a{ display:flex; flex-direction:column; min-width:0 }
.acc-events a b{ color:var(--ink) } .acc-events a:hover b{ color:var(--accent) }
.acc-events small{ font-size:.8125rem; color:var(--subtle) }
.acc-empty{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:var(--muted) }
.acc-main .field input, .acc-main .field textarea{ font:inherit }
@media (max-width:640px){
  .lcard{ padding:.9rem 1rem; border-radius:1.1rem }
  .lcard__brand{ font-size:1rem } .lcard__brand .icon{ width:1.3rem; height:1.3rem }
  .lcard__pts b{ font-size:2.2rem }
  .lcard__bot{ gap:.8rem; font-size:.72rem; margin-top:.6rem } .lcard__bot span{ white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis }
  .lcard__next{ font-size:.7rem }
  .acc-card .lcard{ transform:none }
  .acc-avatar{ width:5.5rem; height:5.5rem; font-size:2.2rem }
  .acc-id__txt h1{ font-size:1.9rem }
  .acc-stat b{ font-size:1.5rem }
  .acc-panel{ padding:1.2rem }
}

/* Sociale Card con XP */
.earn__pts small{ font-size:.55rem; margin-left:.1rem; font-weight:800 }
.earn__pts{ display:flex; align-items:baseline; justify-content:center; gap:0; line-height:3rem }
.lcard__pts span{ font-size:1rem }
.lcard__pts--off b{ font-size:2.2rem }
.linkbox__steps{ display:flex; flex-direction:column; gap:.6rem; margin:1rem 0 .8rem }
.linkbox__steps li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.9375rem }
.linkbox__steps li > span{ width:1.7rem; height:1.7rem; flex:none; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:800; font-size:.85rem }
.linkbox__steps code, .linkbox__note code{ background:var(--surface-2); border-radius:.35rem; padding:.05rem .35rem; font-weight:800 }
.linkbox__steps a{ color:var(--accent); font-weight:800 }
.linkbox__form{ display:flex; gap:.6rem; flex-wrap:wrap }
.linkbox__form input{ flex:1; min-width:12rem; font:inherit; font-family:'Fredoka',sans-serif; font-size:1.4rem; letter-spacing:.12em; text-transform:uppercase; padding:.6rem 1rem; border:2px solid var(--ink); border-radius:1rem; background:#fff; color:var(--ink) }
.linkbox__note{ margin-top:.8rem; font-size:.8125rem }
.xpday{ display:flex; flex-direction:column; gap:.3rem; font-size:.8125rem; font-weight:700; color:var(--muted); margin-top:.3rem }
.xpday__bar{ height:.5rem; border-radius:9999px; background:var(--surface-2); overflow:hidden }
.xpday__bar i{ display:block; height:100%; background:#3BE38B }
.reward.is-open{ box-shadow:0 .3rem 0 var(--ink) }
.linkinfo{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.875rem; color:var(--muted) }
.ledger em.is-wait{ color:var(--subtle) }

/* registrazione: collegamento all'account xat */
.xatlink{ border:2px solid var(--ink); border-radius:1.25rem; box-shadow:0 .3rem 0 var(--ink); background:linear-gradient(180deg,#F2F6FF,#fff 60%); padding:1.25rem; display:flex; flex-direction:column; gap:1rem }
.xatlink__badge{ display:inline-block; font-size:.625rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; background:var(--gold); color:var(--ink); border:2px solid var(--ink); border-radius:9999px; padding:.15rem .6rem }
.xatlink__t{ margin-top:.5rem; font-family:'Fredoka',sans-serif; font-size:1.3rem; font-weight:700 }
.xatlink__t span{ font-family:'Nunito',sans-serif; font-size:.8125rem; font-weight:700; color:var(--subtle) }
.xatlink__p{ margin-top:.25rem; font-size:.875rem; color:var(--muted) }
.xatlink__cols{ display:grid; grid-template-columns:1fr; gap:1rem }
@media (min-width:640px){ .xatlink__cols{ grid-template-columns:1fr 1fr } }
.xatlink__k{ display:block; font-size:.6875rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:.5rem }
.xatlink__list{ display:flex; flex-direction:column; gap:.5rem; font-size:.8125rem; line-height:1.5; color:var(--muted) }
.xatlink__list li{ padding-left:1.2rem; position:relative }
.xatlink__list li::before{ content:"✓"; position:absolute; left:0; color:#12A37F; font-weight:800 }
.xatlink__list b{ color:var(--ink) }
.xatlink a{ color:var(--accent); font-weight:800; text-decoration:underline; text-underline-offset:.15em }
.xatlink__steps{ display:flex; flex-direction:column; gap:.55rem; font-size:.8125rem; line-height:1.5; color:var(--muted) }
.xatlink__steps li{ display:flex; gap:.55rem; align-items:flex-start }
.xatlink__steps li > span{ width:1.45rem; height:1.45rem; flex:none; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:800; font-size:.75rem }
.xatlink__steps b{ color:var(--ink) }
.xatlink code{ background:var(--surface-2); border-radius:.35rem; padding:.05rem .35rem; font-weight:800; color:var(--ink) }
.xatlink__field input{ font-family:'Fredoka',sans-serif; font-size:1.2rem; letter-spacing:.12em; text-transform:uppercase }
.xatlink__note{ font-size:.75rem; color:var(--subtle) }

/* ---------- missioni del giorno */
.missions{ display:flex; flex-direction:column; gap:1rem }
.missions__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
.missions__count{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.3rem; padding:.2rem .9rem; border:2px solid var(--ink); border-radius:9999px; background:var(--gold) }
.msteps{ display:flex; flex-wrap:wrap; gap:.5rem }
.msteps li{ display:flex; align-items:center; gap:.45rem; font-weight:800; font-size:.875rem; padding:.35rem .8rem .35rem .4rem; border-radius:9999px; border:2px solid var(--line); background:#fff }
.msteps i{ display:grid; place-items:center; width:1.4rem; height:1.4rem; border-radius:50%; border:2px solid var(--line); font-style:normal; font-size:.75rem }
.msteps li.is-done{ border-color:#11683C; background:#DDF7E8 }
.msteps li.is-done i{ border-color:#11683C; background:#11683C; color:#fff }
.missions__bonus{ font-weight:800; font-size:.9rem; color:var(--muted) }
.missions__bonus.is-done{ color:#11683C }
.missions__grid{ display:grid; grid-template-columns:1fr; gap:1rem }
@media (min-width:800px){ .missions__grid{ grid-template-columns:1fr 1fr } }
.mbox{ display:flex; flex-direction:column; gap:.6rem; padding:1rem 1.1rem; border:2px solid var(--ink); border-radius:1.25rem; background:#fff; min-width:0 }
.mbox--soft{ background:var(--surface) }
.mbox--empty{ border-style:dashed; border-color:var(--line) }
.mbox--empty p{ color:var(--muted); font-size:.9rem }
.mbox__tag{ font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent) }
.mbox__q{ font-size:1.1rem; line-height:1.35; overflow-wrap:anywhere }
.mbox__big{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.3rem }
.mbox__note{ font-size:.875rem; color:var(--muted); line-height:1.5 }
.mbox__hint{ font-size:.8rem; color:var(--subtle); font-weight:700 }
.mopts{ display:flex; flex-direction:column; gap:.45rem }
.mopt{ display:flex; align-items:center; gap:.6rem; text-align:left; font:inherit; font-weight:700; font-size:.9375rem; padding:.6rem .8rem; border:2px solid var(--line); border-radius:.9rem; background:#fff; color:var(--ink); cursor:pointer; overflow-wrap:anywhere }
.mopt b{ display:grid; place-items:center; flex:none; width:1.6rem; height:1.6rem; border-radius:.5rem; background:var(--surface); font-size:.8rem }
.mopt:not(:disabled):hover{ border-color:var(--ink); background:var(--surface) }
.mopt:disabled{ cursor:default }
.mopt.is-right{ border-color:#11683C; background:#DDF7E8 }
.mopt.is-wrong{ border-color:#C2410C; background:#FDE8DD }
.mopt.is-off{ opacity:.55 }
.mres{ display:flex; flex-direction:column; gap:.55rem }
.mres__row{ display:grid; grid-template-columns:1fr auto; gap:.2rem .6rem; font-size:.9rem; font-weight:700 }
.mres__row.is-mine{ color:var(--accent) }
.mres__bar{ grid-column:1/-1; height:.55rem; border-radius:9999px; background:var(--surface-2); overflow:hidden }
.mres__bar i{ display:block; height:100%; background:var(--accent); border-radius:inherit }
.mres small{ font-size:.75rem; color:var(--subtle); font-weight:700 }
.ladder{ display:flex; gap:.5rem }
.ladder li{ display:flex; flex-direction:column; align-items:center; flex:1; padding:.4rem; border:2px solid var(--line); border-radius:.9rem; background:#fff }
.ladder b{ font-family:'Fredoka',sans-serif; font-size:1.2rem }
.ladder small{ font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--subtle) }
.ladder li.is-done{ border-color:var(--ink); background:var(--gold) }
.wbar{ height:.7rem; border-radius:9999px; background:#fff; border:2px solid var(--ink); overflow:hidden }
.wbar i{ display:block; height:100%; background:var(--gold) }
.invite{ display:flex; gap:.5rem; margin-top:.8rem; flex-wrap:wrap }
.invite__in{ flex:1; min-width:0; font:inherit; font-size:.875rem; padding:.5rem .8rem; border:2px solid var(--line); border-radius:9999px; background:var(--surface) }

/* ---------- commenti */
.comments{ margin-top:3rem; padding-top:2rem; border-top:2px solid var(--line); display:flex; flex-direction:column; gap:1rem; max-width:48rem }
.comments__n{ display:inline-grid; place-items:center; min-width:1.8rem; height:1.8rem; margin-left:.6rem; padding:0 .5rem; border-radius:9999px; background:var(--gold); border:2px solid var(--ink); font-size:1rem; vertical-align:middle }
.comments__login{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; font-size:.9rem; color:var(--muted) }
.comments__empty{ color:var(--muted) }
.cform{ display:flex; flex-direction:column; gap:.5rem }
.cform__in{ width:100%; font:inherit; font-size:.9375rem; padding:.8rem 1rem; border:2px solid var(--line); border-radius:1rem; background:#fff; resize:vertical; min-height:5rem }
.cform__in:focus{ outline:none; border-color:var(--ink) }
.cform__foot{ display:flex; align-items:center; justify-content:flex-end; gap:.6rem }
.cform__foot small{ margin-right:auto; font-size:.75rem; color:var(--subtle) }
.cmsg{ font-weight:700; font-size:.9rem; color:#11683C }
.cmsg.is-err{ color:#C2410C }
.clist{ display:flex; flex-direction:column }
.citem{ display:flex; gap:.8rem; padding:1rem 0; border-top:1px solid var(--line) }
.citem.is-hidden{ opacity:.55 }
.citem__av{ flex:none; width:2.5rem; height:2.5rem; border-radius:50%; overflow:hidden; border:2px solid var(--ink); background:var(--sky-3); display:grid; place-items:center; font-weight:800 }
.citem__av img{ width:100%; height:100%; object-fit:cover }
.citem__main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.3rem }
.citem__head{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap }
.citem__head a{ color:var(--ink); text-decoration:none }
.citem__head small{ font-size:.75rem; color:var(--subtle) }
.citem__staff{ font-size:.65rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:.1rem .45rem; border-radius:9999px; background:var(--accent); color:#fff }
.citem__body{ white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.55 }
.citem__acts{ display:flex; gap:.8rem }
.citem__acts button{ font:inherit; font-size:.75rem; font-weight:800; color:var(--muted); background:none; border:0; padding:0; cursor:pointer }
.citem__acts button:hover{ color:var(--accent) }

/* ---------- idee per gli eventi */
.ideas{ display:flex; flex-direction:column; gap:2.5rem }
.isteps{ display:grid; grid-template-columns:1fr; gap:1rem; counter-reset:none }
@media (min-width:860px){ .isteps{ grid-template-columns:repeat(3,1fr) } }
.isteps li{ display:flex; gap:.9rem; align-items:flex-start; padding:1.1rem 1.2rem; border:2px solid var(--ink); border-radius:1.25rem; background:#fff; box-shadow:0 .3rem 0 var(--ink) }
.isteps li > span{ flex:none; display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%; border:2px solid var(--ink); background:var(--gold); font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.2rem }
.isteps b{ display:block; font-family:'Fredoka',sans-serif; font-size:1.1rem }
.isteps small{ display:block; margin-top:.2rem; font-size:.875rem; color:var(--muted); line-height:1.45 }
.iform{ display:grid; grid-template-columns:1fr; border:2px solid var(--ink); border-radius:1.75rem; overflow:hidden; background:#fff; box-shadow:0 .45rem 0 var(--ink) }
@media (min-width:960px){ .iform{ grid-template-columns:minmax(0,5fr) minmax(0,7fr) } }
.iform__side{ display:flex; flex-direction:column; gap:.9rem; padding:2rem; color:#fff;
  background:radial-gradient(500px 300px at 90% 0%,#3B6BFF 0%,rgba(59,107,255,0) 70%),linear-gradient(160deg,#0A1240 0%,#1A2A9E 100%) }
.iform__tag{ font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#5EE1FF }
.iform__side h2{ font-size:clamp(1.6rem,3vw,2.1rem); line-height:1.1; color:#fff }
.iform__side p{ color:rgba(255,255,255,.75); font-size:.95rem }
.istarters{ display:flex; flex-wrap:wrap; gap:.5rem }
.istarter{ display:inline-flex; align-items:center; gap:.4rem; font:inherit; font-weight:800; font-size:.85rem; padding:.45rem .85rem; border-radius:9999px; border:2px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; cursor:pointer; transition:background .2s, border-color .2s, transform .2s }
.istarter:not(:disabled):hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); transform:translateY(-2px) }
.istarter:disabled{ opacity:.5; cursor:default }
.iform__tips{ margin-top:auto; display:flex; flex-direction:column; gap:.4rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.15); font-size:.875rem; color:rgba(255,255,255,.8) }
.iform__tips li{ display:flex; align-items:center; gap:.5rem } .iform__tips .ico{ color:var(--gold) }
.iform__main{ padding:2rem; display:flex; flex-direction:column; justify-content:center }
.iform__main form{ display:flex; flex-direction:column; gap:1.1rem }
.ifield{ display:flex; flex-direction:column; gap:.4rem }
.ifield > span{ font-weight:800; font-size:.9rem }
.ifield input, .ifield textarea{ width:100%; font:inherit; font-size:1rem; padding:.85rem 1.1rem; border:2px solid var(--line); border-radius:1rem; background:var(--surface); color:var(--ink); transition:border-color .2s, background .2s }
.ifield textarea{ resize:vertical; min-height:10rem; line-height:1.55 }
.ifield input:focus, .ifield textarea:focus{ outline:none; border-color:var(--ink); background:#fff }
.ifield small{ font-size:.75rem; color:var(--subtle); text-align:right }
.ifield small.ifield__err{ color:#C2410C; font-weight:700; text-align:left }
.imsg{ font-weight:700; font-size:.9rem; padding:.7rem 1rem; border-radius:1rem; background:#DDF7E8; color:#11683C }
.imsg.is-err{ background:#FDE8DD; color:#C2410C }
.iform__foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.iform__foot small{ font-size:.8rem; color:var(--subtle); font-weight:700 }
.iform__foot .checkin{ align-self:auto }
.iform__login{ display:flex; flex-direction:column; gap:1rem; align-items:flex-start }
.iform__login p{ font-size:1.05rem; color:var(--muted) }
.iform__btns{ display:flex; gap:.8rem; align-items:center; flex-wrap:wrap }
.iform__btns .checkin{ text-decoration:none }
.isec{ display:flex; flex-direction:column; gap:1rem }
.imine{ display:flex; flex-direction:column; border:2px solid var(--ink); border-radius:1.25rem; background:#fff; overflow:hidden }
.imine li{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:1rem 1.2rem; border-top:1px solid var(--line) }
.imine li:first-child{ border-top:0 }
.imine b{ font-weight:800 }
.imine small{ display:block; font-size:.75rem; color:var(--subtle) }
.imine p{ margin-top:.4rem; font-size:.875rem; color:var(--muted) }
.imine .idea__st{ flex:none }
.iempty{ display:flex; align-items:center; gap:1rem; padding:1.4rem 1.5rem; border:2px dashed var(--line); border-radius:1.25rem; background:#fff }
.iempty span{ font-size:2rem }
.iempty p{ color:var(--muted) }
.iempty b{ color:var(--ink) }
.ideas__list{ display:grid; grid-template-columns:1fr; gap:1rem }
@media (min-width:700px){ .ideas__list{ grid-template-columns:1fr 1fr } }
@media (min-width:1100px){ .ideas__list{ grid-template-columns:repeat(3,1fr) } }
.idea{ display:flex; flex-direction:column; gap:.5rem; padding:1.1rem 1.2rem; border:2px solid var(--ink); border-radius:1.25rem; background:#fff }
.idea h3{ font-size:1.15rem }
.idea p{ font-size:.9rem; color:var(--muted); line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere }
.idea small{ font-size:.75rem; color:var(--subtle) }
.idea small a{ color:var(--accent); font-weight:700 }
.idea__note{ padding:.5rem .7rem; border-radius:.8rem; background:var(--surface) }
.idea__st{ align-self:flex-start; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.2rem .6rem; border-radius:9999px; border:2px solid var(--ink); background:var(--sky-3) }
.idea__st.is-planned{ background:var(--gold) }
.idea__st.is-done{ background:#DDF7E8 }
.idea__st.is-new{ background:#FFF4D6 }
.idea__st.is-rejected{ background:var(--surface-2) }
.comments__note{ font-size:.8rem; color:var(--subtle); margin-top:-.4rem }
.cthread{ border-top:1px solid var(--line) }
.cthread > ul > .citem{ border-top:0 }
.creplies{ margin-left:3.3rem; padding-left:1rem; border-left:3px solid var(--line); display:flex; flex-direction:column }
.creplies .citem{ padding:.7rem 0; border-top:0 }
.creplies__form{ padding:.5rem 0 1rem }
.citem--reply .citem__av{ width:2rem; height:2rem; font-size:.8rem }
.citem.is-pending{ opacity:.75 }
.citem__wait{ font-size:.65rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.1rem .5rem; border-radius:9999px; background:#FFF4D6; color:#8A5A00; border:1px solid #F1D48A }
@media (max-width:600px){ .creplies{ margin-left:1rem } }

/* ---------- menu a tutto schermo: con tante voci si scorre invece di tagliarle */
.navmenu{ overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch }
.navmenu__top{ position:sticky; top:0; z-index:1; width:100%; background:#0A1240;
  /* sfondo pieno su tutta la larghezza, cosi' le voci che scorrono sotto non si vedono ai lati */
  box-shadow:0 0 0 100vmax #0A1240, 0 1.25rem 1rem -.25rem #0A1240; clip-path:inset(0 -100vmax -2rem) }
.navmenu__nav{ flex:1 0 auto; justify-content:safe center; padding-bottom:1rem }
.navmenu__item{ font-size:clamp(1.35rem, 4.2vh, 2.25rem); padding-block:clamp(.2rem, .9vh, .5rem) }
.navmenu__bot{ flex:none }
.article-body ~ .comments, .tags ~ .comments{ margin-inline:auto }

/* ---------- foto profilo con cornici */
.pav{ position:relative; display:inline-grid; place-items:center; flex:none; width:var(--pav,4.5rem); height:var(--pav,4.5rem) }
.pav--sm{ --pav:2.6rem } .pav--md{ --pav:4.5rem } .pav--lg{ --pav:8rem } .pav--xl{ --pav:10rem }
.pav__img{ position:relative; z-index:1; width:100%; height:100%; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:var(--gold); border:3px solid #fff; box-shadow:0 0 0 2px var(--ink) }
.pav__img img{ width:100%; height:100%; object-fit:cover }
.pav__img b{ font-family:'Fredoka',sans-serif; font-size:calc(var(--pav) * .42); color:var(--ink) }
.pav--f-glow .pav__img{ box-shadow:0 0 0 2px var(--ink), 0 0 0 calc(var(--pav) * .05) #5EE1FF, 0 0 calc(var(--pav) * .3) #3B6BFF }
.pav--f-rainbow::before, .pav--f-tier::before, .pav--f-staff::before, .pav--f-fire::before{ content:''; position:absolute; inset:calc(var(--pav) * -.07); border-radius:50%; z-index:0 }
.pav--f-rainbow::before{ background:conic-gradient(#FF4D8D,#F28C0C,#FFC83D,#12A37F,#0EA5E9,#7C4DFF,#FF4D8D); animation:pavspin 6s linear infinite }
.pav--f-fire::before{ background:conic-gradient(#FFC83D,#FF6A00,#E0301E,#FF6A00,#FFC83D); animation:pavspin 3s linear infinite }
.pav--f-staff::before{ background:conic-gradient(#2456F0,#5EE1FF,#2456F0,#0A1240,#2456F0) }
.pav--f-tier::before{ background:var(--cg, linear-gradient(135deg,#C98A4B,#8A4A1F)) }
.pav--tier-bronze{ --cg:linear-gradient(135deg,#E0A56A 0%,#8A4A1F 100%) }
.pav--tier-silver{ --cg:linear-gradient(135deg,#E4ECF7 0%,#51607D 100%) }
.pav--tier-gold{ --cg:linear-gradient(135deg,#FFE58A 0%,#E08A00 100%) }
.pav--tier-diamond{ --cg:conic-gradient(#6FE3FF,#3B6BFF,#7C4DFF,#6FE3FF) }
@keyframes pavspin{ to{ transform:rotate(1turn) } }
.pav__orbit{ position:absolute; left:-24%; right:-24%; top:34%; bottom:34%; border:calc(var(--pav) * .04) solid #FFC83D; border-radius:50%; transform:rotate(-16deg); pointer-events:none; z-index:0 }
.pav__orbit--front{ z-index:2; clip-path:inset(50% 0 0 0) }
.pav__orbit--front > i{ position:absolute; top:62%; right:4%; width:calc(var(--pav) * .13); height:calc(var(--pav) * .13); border-radius:50%; background:#5EE1FF; border:2px solid var(--ink) }
.pav__stars{ position:absolute; inset:calc(var(--pav) * -.18); z-index:2; pointer-events:none; animation:pavspin 14s linear infinite }
.pav__stars .ico{ position:absolute; width:calc(var(--pav) * .2); height:calc(var(--pav) * .2); color:#FFC83D; filter:drop-shadow(0 0 4px rgba(255,200,61,.8)) }
.pav__stars .ico:nth-child(1){ top:0; left:45% } .pav__stars .ico:nth-child(2){ top:45%; right:0; color:#5EE1FF }
.pav__stars .ico:nth-child(3){ bottom:0; left:40% } .pav__stars .ico:nth-child(4){ top:40%; left:0; color:#5EE1FF }
.pav__emoji{ position:absolute; z-index:3; right:-4%; bottom:-4%; display:grid; place-items:center; width:calc(var(--pav) * .36); height:calc(var(--pav) * .36); min-width:1.1rem; min-height:1.1rem; border-radius:50%; background:#fff; border:2px solid var(--ink); font-style:normal }
.pav__emoji .ico{ width:62%; height:62% }
.pav__emoji--fire{ color:#FF6A00 } .pav__emoji--staff{ color:#2456F0 } .pav__emoji--lightning{ color:#7C4DFF } .pav__emoji--trophy{ color:#E08A00 } .pav__emoji--crown{ color:#E08A00; top:-12%; bottom:auto; right:auto; left:50%; transform:translateX(-50%) }
@media (prefers-reduced-motion:reduce){ .pav--f-rainbow::before, .pav--f-fire::before, .pav__stars{ animation:none } }

/* ---------- profilo pubblico */
.uprof{ --acc:#2456F0; background:var(--surface) }
.ucover{ min-height:17rem; padding:6.2rem 0 0; border-radius:0 0 2rem 2rem }
.ucover .shell{ position:relative; z-index:1; padding-inline:1.25rem }
.ucover--galaxy{ background:radial-gradient(120% 95% at 80% 8%, #3B6BFF 0%, #1A2A9E 44%, #0A1240 100%) }
.ucover--ocean{ background:linear-gradient(160deg,#0EA5E9 0%,#2456F0 55%,#0A1240 100%) }
.ucover--sunset{ background:linear-gradient(160deg,#FFC83D 0%,#FF6A5B 45%,#7C4DFF 100%) }
.ucover--aurora{ background:linear-gradient(160deg,#12A37F 0%,#0EA5E9 45%,#7C4DFF 100%) }
.ucover--candy{ background:linear-gradient(160deg,#FF9BC8 0%,#FF4D8D 45%,#7C4DFF 100%) }
.ucover--forest{ background:linear-gradient(160deg,#9BE15D 0%,#12A37F 45%,#0B3D3A 100%) }
.ucover--gold{ background:linear-gradient(160deg,#FFE58A 0%,#F2A20C 50%,#8A4A1F 100%) }
.ucover--night{ background:linear-gradient(160deg,#3A3F5C 0%,#161A2E 60%,#05060D 100%) }
.uhead{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:1rem; margin-top:-5rem; padding:0 1.25rem }
@media (min-width:800px){ .uhead{ flex-direction:row; align-items:flex-start; gap:1.8rem; padding-left:2.8rem } .uhead__txt{ padding-top:5.6rem } }
.uhead__av{ margin-left:calc(var(--pav) * .1) }
.uhead__av{ --pav:9rem }
@media (min-width:800px){ .uhead__av{ --pav:11rem } }
.uhead__txt{ display:flex; flex-direction:column; gap:.5rem; padding-bottom:.4rem; min-width:0 }
.uhead h1{ display:flex; align-items:center; flex-wrap:wrap; gap:.4rem .8rem; font-size:clamp(2rem,5vw,3rem); line-height:1.05; color:var(--ink); overflow-wrap:anywhere }
.ustaff{ font-family:'Nunito',sans-serif; font-size:.8rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.3rem .8rem; border-radius:9999px; background:var(--ink); color:#fff; white-space:nowrap }
.uhead__line{ font-size:1.15rem; font-weight:700; color:var(--acc) }
.uhead__meta{ display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; font-size:.9rem; color:var(--muted) }
.ulinks{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.3rem }
.ulink{ display:inline-flex; align-items:center; gap:.3rem; font-size:.85rem; font-weight:800; padding:.4rem .85rem; border-radius:9999px; border:2px solid var(--ink); background:#fff; color:var(--ink); text-decoration:none; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
a.ulink:hover{ background:var(--acc); border-color:var(--acc); color:#fff }
.ulink b{ color:#12A37F }
.ubody{ display:grid; grid-template-columns:1fr; gap:1.5rem; padding:2rem 1.25rem 4rem }
@media (min-width:960px){ .ubody{ grid-template-columns:minmax(0,1fr) 24rem; align-items:start } }
.ubody__main, .ubody__side{ display:flex; flex-direction:column; gap:1.5rem; min-width:0 }
.ubox{ padding:1.4rem 1.5rem; border:2px solid var(--ink); border-radius:1.5rem; background:#fff; box-shadow:0 .35rem 0 var(--ink) }
.ubox h2{ font-size:1.2rem; margin-bottom:.9rem; display:flex; align-items:center; gap:.5rem }
.ubox h2::before{ content:''; width:.6rem; height:.6rem; border-radius:50%; background:var(--acc) }
.ubox--card .lcard{ max-width:none; transform:none }
.ubio{ white-space:pre-wrap; line-height:1.65; color:var(--ink); overflow-wrap:anywhere }
.uempty{ color:var(--muted) }
.utags{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1rem }
.utags li{ font-size:.85rem; font-weight:800; padding:.3rem .75rem; border-radius:9999px; background:color-mix(in srgb, var(--acc) 12%, #fff); color:var(--acc) }
.ubadges{ display:flex; flex-wrap:wrap; gap:.6rem }
.ubadges li{ display:inline-flex; align-items:center; gap:.45rem; font-weight:800; font-size:.875rem; padding:.45rem .9rem .45rem .5rem; border-radius:9999px; border:2px solid var(--ink); background:var(--surface) }
.ubadges li span{ display:grid; place-items:center; width:1.8rem; height:1.8rem; border-radius:50%; background:#fff; border:2px solid var(--ink); font-size:.95rem }
.uevents{ display:grid; grid-template-columns:repeat(auto-fill,minmax(12rem,1fr)); gap:.9rem }
.uevents li{ display:flex; flex-direction:column; gap:.3rem }
.uevents a{ display:flex; flex-direction:column; gap:.5rem; color:var(--ink); text-decoration:none; font-weight:800 }
.uevents a img, .uevents a > span{ width:100%; aspect-ratio:2/1; object-fit:cover; border-radius:.9rem; border:2px solid var(--ink); background:var(--sky-3); display:grid; place-items:center; font-size:1.6rem }
.uevents a:hover b{ color:var(--acc) }
.uevents small{ font-size:.75rem; color:var(--subtle) }
.ustats{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem }
.ustats li{ display:flex; flex-direction:column; padding:.7rem .8rem; border-radius:1rem; background:var(--surface) }
.ustats b{ font-family:'Fredoka',sans-serif; font-size:1.6rem; line-height:1.1; color:var(--acc) }
.ustats span{ font-size:.75rem; font-weight:700; color:var(--muted) }

/* ---------- editor del profilo */
.pedit{ display:flex; flex-direction:column; gap:1.4rem }
.pprev{ border:2px solid var(--ink); border-radius:1.4rem; overflow:hidden; background:#fff }
.pprev__cover{ height:6rem }
.pprev__row{ display:flex; align-items:flex-end; gap:1rem; padding:0 1.2rem 1rem; margin-top:-3rem; flex-wrap:wrap }
.pprev__txt{ display:flex; flex-direction:column; min-width:0; flex:1; padding-bottom:.2rem }
.pprev__txt b{ font-family:'Fredoka',sans-serif; font-size:1.4rem }
.pprev__txt span{ font-weight:700; color:var(--acc) }
.pprev__txt small{ color:var(--subtle); font-size:.8rem }
.pprev__view{ margin-bottom:.3rem }
.pinvite{ display:flex; gap:.6rem; align-items:flex-start; padding:.8rem 1rem; border-radius:1rem; background:#FFF4D6; border:2px solid #F1D48A; font-size:.9rem }
.pbasics{ padding:1rem 1.1rem; border-radius:1rem; background:var(--surface) }
.pbasics__head{ display:flex; justify-content:space-between; font-weight:800 }
.pbasics__bar{ height:.5rem; border-radius:9999px; background:#fff; margin:.5rem 0 .7rem; overflow:hidden; border:1px solid var(--line) }
.pbasics__bar i{ display:block; height:100%; background:#12A37F }
.pbasics ul{ display:flex; flex-wrap:wrap; gap:.4rem }
.pbasics li{ display:inline-flex; align-items:center; gap:.3rem; font-size:.8rem; font-weight:800; padding:.25rem .7rem; border-radius:9999px; background:#fff; color:var(--muted); border:1px solid var(--line) }
.pbasics li.is-done{ background:#DDF7E8; color:#11683C; border-color:#9AD9B5 }
.pset{ border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:1rem; padding-top:1.2rem; border-top:1px solid var(--line) }
.pset legend{ font-family:'Fredoka',sans-serif; font-size:1.2rem; font-weight:700; margin-bottom:.4rem; padding:0 }
.pset__row{ display:flex; flex-direction:column; gap:.5rem }
.pset__lab{ font-weight:800; font-size:.9rem }
.pset__opt{ font-weight:600; color:var(--subtle) }
.pset__btns{ display:flex; gap:.5rem; flex-wrap:wrap }
.pswatches{ display:grid; grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr)); gap:.5rem }
.pswatch{ height:3.4rem; border-radius:.9rem; border:2px solid transparent; outline:2px solid transparent; display:flex; align-items:flex-end; padding:.35rem .5rem; cursor:pointer; font:inherit }
.pswatch span{ font-size:.7rem; font-weight:800; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.4) }
.pswatch.is-on{ border-color:#fff; outline-color:var(--ink) }
.pdots{ display:flex; gap:.6rem; flex-wrap:wrap }
.pdot{ width:2.2rem; height:2.2rem; border-radius:50%; border:3px solid #fff; outline:2px solid var(--line); cursor:pointer }
.pdot.is-on{ outline:3px solid var(--ink) }
.pframes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr)); gap:.6rem }
.pframe{ display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:.9rem .4rem .6rem; border:2px solid var(--line); border-radius:1rem; background:#fff; cursor:pointer; font:inherit; text-align:center }
.pframe > span{ font-size:.8rem; font-weight:800 }
.pframe small{ font-size:.65rem; color:var(--subtle); line-height:1.2 }
.pframe.is-on{ border-color:var(--ink); background:var(--surface); box-shadow:0 .2rem 0 var(--ink) }
.pframe.is-locked{ opacity:.55; cursor:not-allowed }
.pgrid{ display:grid; grid-template-columns:1fr; gap:1rem }
@media (min-width:700px){ .pgrid{ grid-template-columns:1fr 1fr } }
.ifield select{ width:100%; font:inherit; font-size:1rem; padding:.85rem 1.1rem; border:2px solid var(--line); border-radius:1rem; background:var(--surface); color:var(--ink) }
.pchips, .ptags{ display:flex; flex-wrap:wrap; gap:.4rem }
.pchip{ font:inherit; font-size:.8rem; font-weight:800; padding:.35rem .8rem; border-radius:9999px; border:2px solid var(--line); background:#fff; color:var(--muted); cursor:pointer }
.pchip.is-on{ border-color:var(--ink); background:var(--ink); color:#fff }
.ptags input{ flex:1; min-width:12rem; font:inherit; font-size:.9rem; padding:.4rem .8rem; border:2px solid var(--line); border-radius:9999px; background:var(--surface) }
.pedit__foot{ display:flex; justify-content:flex-end; position:sticky; bottom:1rem; z-index:5 }

/* ---------- inviti */
.inv{ display:flex; flex-direction:column; gap:1.2rem }
.inv__hero{ display:flex; flex-direction:column; gap:1rem; padding:1.4rem; border-radius:1.4rem; color:#fff; background:radial-gradient(400px 220px at 90% 0%,#3B6BFF,rgba(59,107,255,0) 70%),linear-gradient(160deg,#0A1240,#1A2A9E) }
.inv__big{ display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap }
.inv__big b{ font-family:'Fredoka',sans-serif; font-size:2.4rem; color:var(--gold); line-height:1 }
.inv__big span{ color:rgba(255,255,255,.85); font-weight:700 }
.inv__link{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center }
.inv__link input{ flex:1; min-width:14rem; font:inherit; font-size:.9rem; padding:.7rem 1rem; border-radius:9999px; border:2px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1); color:#fff }
.inv__link .checkin{ font-size:1rem; padding:.6rem 1.4rem }
.inv__link .minibtn{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5) }
.inv__how{ display:grid; grid-template-columns:1fr; gap:.5rem; font-size:.9rem; color:rgba(255,255,255,.85) }
@media (min-width:800px){ .inv__how{ grid-template-columns:repeat(3,1fr) } }
.inv__how li{ display:flex; gap:.5rem; align-items:flex-start }
.inv__how span{ flex:none; display:grid; place-items:center; width:1.5rem; height:1.5rem; border-radius:50%; background:var(--gold); color:var(--ink); font-weight:800; font-size:.8rem }
.inv__how b{ color:var(--gold) }
.inv__note{ font-size:.8rem; color:var(--muted) }
.inv__hero .inv__note{ color:rgba(255,255,255,.8) } .inv__hero .inv__note a{ color:var(--gold) }
.inv__totals{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem }
.inv__totals li{ display:flex; flex-direction:column; padding:.8rem; border-radius:1rem; background:var(--surface); text-align:center }
.inv__totals b{ font-family:'Fredoka',sans-serif; font-size:1.7rem; color:var(--accent) }
.inv__totals span{ font-size:.75rem; font-weight:700; color:var(--muted) }
.inv__list{ display:flex; flex-direction:column }
.inv__list li{ display:grid; grid-template-columns:1fr; gap:.5rem; padding:.9rem 0; border-top:1px solid var(--line) }
@media (min-width:800px){ .inv__list li{ grid-template-columns:minmax(0,1.2fr) auto minmax(0,1fr); align-items:center } }
.inv__who{ display:flex; align-items:center; gap:.7rem; color:var(--ink); text-decoration:none; min-width:0 }
.inv__who span{ display:flex; flex-direction:column; min-width:0 }
.inv__who small{ font-size:.75rem; color:var(--subtle) }
.inv__steps{ display:flex; gap:.3rem; flex-wrap:wrap }
.inv__steps span{ font-size:.7rem; font-weight:800; padding:.15rem .5rem; border-radius:9999px; background:var(--surface); color:var(--subtle) }
.inv__steps span.is-done{ background:#DDF7E8; color:#11683C }
.inv__st{ font-size:.8rem; font-weight:800; justify-self:start }
@media (min-width:800px){ .inv__st{ justify-self:end; text-align:right } }
.inv__st.is-ok{ color:#11683C } .inv__st.is-wait{ color:#8A5A00 } .inv__st.is-no{ color:#C2410C } .inv__st.is-todo{ color:var(--muted) }
.inv__empty{ color:var(--muted) }
.member__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:.3rem .9rem } .member__link--site{ font-weight:800 }

/* ---------- temi degli eventi (sbloccati con i distintivi) */
.ucover--superpowers{ background:radial-gradient(40% 70% at 70% 30%, rgba(226,29,72,.55), transparent 70%), radial-gradient(35% 60% at 88% 70%, rgba(242,162,12,.5), transparent 70%), radial-gradient(35% 60% at 50% 90%, rgba(124,77,255,.6), transparent 70%), linear-gradient(150deg,#0A1240 0%,#1A2A9E 60%,#0EA5E9 100%) }
.ucover--chatwin{ background:radial-gradient(30% 55% at 80% 35%, rgba(255,214,77,.85), transparent 70%), radial-gradient(22% 40% at 62% 80%, rgba(255,184,0,.7), transparent 70%), linear-gradient(150deg,#0A1240 0%,#2456F0 70%,#5EE1FF 100%) }
.ucover--party{ background:radial-gradient(circle at 15% 30%, #FFC83D 0 .35rem, transparent .4rem) 0 0/5rem 5rem, radial-gradient(circle at 60% 70%, #FF4D8D 0 .3rem, transparent .35rem) 0 0/6rem 6rem, radial-gradient(circle at 40% 20%, #5EE1FF 0 .3rem, transparent .35rem) 0 0/7rem 7rem, linear-gradient(150deg,#7C4DFF 0%,#FF4D8D 60%,#FFC83D 100%) }
.pav--f-lightning::before, .pav--f-trophy::before, .pav--f-crown::before{ content:''; position:absolute; inset:calc(var(--pav) * -.07); border-radius:50%; z-index:0 }
.pav--f-lightning::before{ background:conic-gradient(#5EE1FF,#7C4DFF,#E11D48,#FFC83D,#5EE1FF); animation:pavspin 2.4s linear infinite; filter:drop-shadow(0 0 8px rgba(94,225,255,.8)) }
.pav--f-trophy::before{ background:conic-gradient(#FFE58A,#F2A20C,#FFF3C4,#E08A00,#FFE58A); box-shadow:0 0 calc(var(--pav) * .18) rgba(242,162,12,.6) }
.pav--f-crown::before{ background:conic-gradient(#FFC83D,#FFF3C4,#FFC83D,#E08A00,#FFC83D) }
.pswatch.is-locked{ opacity:.5; cursor:not-allowed; filter:grayscale(.6) }
.pmybadges{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:.8rem 1rem; border-radius:1rem; background:#FFF4D6; border:2px solid #F1D48A; font-size:.85rem }
.pmybadges span{ display:inline-flex; align-items:center; gap:.3rem; font-weight:800; padding:.2rem .6rem; border-radius:9999px; background:#fff; border:1px solid #F1D48A }
.ubadges li.is-special{ background:linear-gradient(135deg,#FFF3C4,#FFD24D); border-color:#8A5A00 }

/* ---------- classifica inviti */
.ilead{ padding:1.3rem 1.4rem; border:2px solid var(--ink); border-radius:1.4rem; background:#fff; box-shadow:0 .35rem 0 var(--ink) }
.ilead__head{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.8rem }
.ilead__head h3{ font-size:1.2rem }
.ilead__head span{ font-size:.8rem; font-weight:800; color:var(--subtle) }
.ilead__list{ display:flex; flex-direction:column }
.ilead__list li{ display:grid; grid-template-columns:2.2rem 1fr auto; align-items:center; gap:.6rem; padding:.55rem 0; border-top:1px solid var(--line) }
.ilead__list li:first-child{ border-top:0 }
.ilead__pos{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.2rem; text-align:center; color:var(--subtle) }
.ilead__list a{ display:flex; align-items:center; gap:.6rem; color:var(--ink); text-decoration:none; min-width:0 }
.ilead__list a b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ilead__n{ font-size:.8rem; font-weight:800; color:var(--accent); white-space:nowrap }
.ilead__list li.is-1{ background:linear-gradient(90deg,#FFF3C4,transparent); border-radius:.8rem }
.ilead__empty{ color:var(--muted) }
.ilead-sec{ display:grid; grid-template-columns:1fr; gap:2rem; align-items:start }
@media (min-width:900px){ .ilead-sec{ grid-template-columns:1fr 1fr } }
.inv .ilead{ box-shadow:none; border-width:1px; border-color:var(--line) }

/* ---------- discussione (commenti) */
.disc{ width:100%; max-width:48rem; margin:3rem auto 0; display:flex; flex-direction:column; gap:1.1rem }
.detail__main .disc{ margin-inline:0; max-width:none }
.disc__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-bottom:.9rem; border-bottom:2px solid var(--ink) }
.disc__head h2{ font-size:1.6rem; display:flex; align-items:center; gap:.6rem }
.disc__n{ display:inline-grid; place-items:center; min-width:2rem; height:2rem; padding:0 .55rem; border-radius:9999px; background:var(--gold); border:2px solid var(--ink); font-size:1rem }
.disc__sort{ display:inline-flex; border:2px solid var(--ink); border-radius:9999px; overflow:hidden }
.disc__sort button{ font:inherit; font-size:.8rem; font-weight:800; padding:.35rem .85rem; border:0; background:#fff; color:var(--ink); cursor:pointer }
.disc__sort button[aria-pressed="true"]{ background:var(--ink); color:#fff }
.disc__login{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.1rem 1.2rem; border-radius:1.2rem; background:linear-gradient(135deg,#EEF3FF,#FFF8E1); border:2px solid var(--line) }
.disc__login > div:first-child{ display:flex; flex-direction:column; gap:.2rem; min-width:14rem; flex:1 }
.disc__login b{ font-family:'Fredoka',sans-serif; font-size:1.15rem }
.disc__login span{ font-size:.875rem; color:var(--muted) }
.disc__login-btns{ display:flex; gap:.5rem }
.disc__empty{ display:flex; align-items:center; gap:.9rem; padding:1.4rem; border:2px dashed var(--line); border-radius:1.2rem; color:var(--muted) }
.disc__empty span{ font-size:1.8rem } .disc__empty b{ color:var(--ink) }
.disc__list{ display:flex; flex-direction:column }
.ccomp{ display:flex; gap:.8rem; align-items:flex-start }
.ccomp__box{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.55rem; padding:.3rem; border:2px solid var(--line); border-radius:1.2rem; background:#fff; transition:border-color .2s, box-shadow .2s }
.ccomp.is-open .ccomp__box, .ccomp__box:focus-within{ border-color:var(--ink); box-shadow:0 .25rem 0 var(--ink) }
.ccomp textarea{ width:100%; font:inherit; font-size:.95rem; line-height:1.5; padding:.6rem .75rem; border:0; background:transparent; resize:none; min-height:2.8rem; outline:none; color:var(--ink) }
.ccomp .captcha{ padding:0 .5rem }
.ccomp__foot{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; padding:.2rem .45rem .35rem }
.ccomp__foot small{ font-size:.72rem; color:var(--subtle) }
.ccomp__btns{ display:flex; gap:.4rem; margin-left:auto }
.ccomp--reply{ margin-top:.4rem }
.cthr{ padding:1.1rem 0; border-bottom:1px solid var(--line) }
.cthr__replies{ margin:.6rem 0 0 1.3rem; padding-left:1.6rem; border-left:2px solid var(--line); display:flex; flex-direction:column; gap:.9rem }
.cmt{ display:flex; gap:.8rem }
.cmt.is-pending{ opacity:.8 } .cmt.is-hidden{ opacity:.5 }
.cmt__av{ flex:none; text-decoration:none }
.cmt__main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.3rem }
.cmt__head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.25rem .55rem }
.cmt__name{ font-weight:800; color:var(--ink); text-decoration:none }
.cmt__name:hover{ color:var(--accent) }
.cmt__rank{ font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.12rem .5rem; border-radius:9999px; background:var(--ink); color:#fff }
.cmt__head time{ font-size:.75rem; color:var(--subtle) }
.cmt__flag{ font-size:.64rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:.12rem .5rem; border-radius:9999px; background:#FFF4D6; color:#8A5A00; border:1px solid #F1D48A }
.cmt__flag--off{ background:var(--surface-2); color:var(--muted); border-color:var(--line) }
.cmt__body{ white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; font-size:.95rem; color:var(--ink) }
.cmt__edit textarea{ width:100%; font:inherit; padding:.6rem .8rem; border:2px solid var(--ink); border-radius:1rem; margin-bottom:.4rem }
.cmt__acts{ display:flex; align-items:center; gap:1rem; margin-top:.1rem }
.cmt__acts button{ display:inline-flex; align-items:center; gap:.3rem; font:inherit; font-size:.8rem; font-weight:800; color:var(--muted); background:none; border:0; padding:0; cursor:pointer }
.cmt__acts button:hover:not(:disabled){ color:var(--accent) }
.cmt__acts button.is-mod{ color:#8A5A00 }
.cmt__like span{ font-size:1.05rem; line-height:1 }
.cmt__like.is-on{ color:#E11D48 } .cmt__like:disabled{ cursor:default; opacity:.7 }
@media (max-width:600px){ .cthr__replies{ margin-left:.4rem; padding-left:.9rem } .disc__head h2{ font-size:1.35rem } }

/* ---------- condividi */
.share{ display:flex; flex-direction:column; gap:.6rem }
.share__lab{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.05rem; color:var(--ink) }
.share__btns{ display:flex; gap:.45rem; flex-wrap:wrap }
.share__b{ display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:50%; border:2px solid var(--ink); background:#fff; color:var(--ink); font:inherit; font-weight:800; cursor:pointer; text-decoration:none; transition:transform .15s, background .15s, color .15s }
.share__b:hover{ transform:translateY(-2px); color:#fff }
.share__b--whatsapp:hover{ background:#25D366; border-color:#25D366 } .share__b--telegram:hover{ background:#229ED9; border-color:#229ED9 }
.share__b--facebook:hover{ background:#1877F2; border-color:#1877F2 } .share__b--x:hover{ background:#000; border-color:#000 }
.share__b--copy:hover, .share__b--more:hover{ background:var(--ink) }
.share__ok{ font-size:.8rem; font-weight:800; color:#11683C }
.article-share{ max-width:48rem; margin:2rem auto 0; padding:1.1rem 1.2rem; border:2px solid var(--line); border-radius:1.2rem; background:#fff }
.article-share .share{ flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap }

/* ---------- partecipa / segui */
.evact{ display:flex; flex-direction:column; gap:.6rem; margin-top:.4rem }
.evact__btns{ display:flex; gap:.5rem; flex-wrap:wrap }
.evact__b{ flex:1; min-width:8rem; display:inline-flex; align-items:center; justify-content:center; gap:.45rem; font:inherit; font-weight:800; font-size:.95rem; padding:.7rem 1rem; border-radius:9999px; border:2px solid var(--ink); cursor:pointer; box-shadow:0 .25rem 0 var(--ink); transition:transform .15s }
.evact__b:hover:not(:disabled){ transform:translateY(-2px) }
.evact__b:disabled{ opacity:.6; cursor:default }
.evact__b--go{ background:var(--gold); color:var(--ink) }
.evact__b--go.is-on{ background:#DDF7E8; }
.evact__b--follow{ background:#fff; color:var(--ink) }
.evact__b--follow.is-on{ background:var(--ink); color:#fff }
.evact__n{ font-size:.85rem; color:var(--muted) } .evact__n b{ color:var(--ink) }
.evact__msg{ font-size:.85rem; font-weight:700; color:#11683C } .evact__msg.is-err{ color:#C2410C }
.evact__hint{ font-size:.8rem; color:var(--subtle) } .evact__hint a{ color:var(--accent); font-weight:700 }
@media (max-width:1023px){ .detail__side{ order:-1 } }

/* ---------- pagina pubblica Sociale Card */
.lfacts{ display:flex; flex-wrap:wrap; gap:.5rem }
.lfacts li{ display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:800; padding:.35rem .8rem; border-radius:9999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff }
.lwhat{ display:grid; grid-template-columns:1fr; gap:1.2rem; margin-top:1.6rem }
@media (min-width:860px){ .lwhat{ grid-template-columns:repeat(3,1fr) } }
.lwhat__i{ padding:1.4rem; border:2px solid var(--ink); border-radius:1.4rem; background:#fff; box-shadow:0 .35rem 0 var(--ink); display:flex; flex-direction:column; gap:.5rem }
.lwhat__i > span{ display:grid; place-items:center; width:3.2rem; height:3.2rem; border-radius:1rem; border:2px solid var(--ink); background:var(--gold); color:var(--ink) }
.lwhat__i h3{ font-size:1.2rem }
.lwhat__i p{ color:var(--muted); line-height:1.6; font-size:.95rem }
.steps3--4{ grid-template-columns:1fr }
@media (min-width:700px){ .steps3--4{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1100px){ .steps3--4{ grid-template-columns:repeat(4,1fr) } }
.lgroups{ display:grid; grid-template-columns:1fr; gap:1.2rem; margin-top:1.6rem }
@media (min-width:900px){ .lgroups{ grid-template-columns:1fr 1fr } }
.lgroup{ border:2px solid var(--ink); border-radius:1.4rem; background:#fff; overflow:hidden; box-shadow:0 .35rem 0 var(--ink) }
.lgroup__head{ padding:1rem 1.2rem; background:var(--surface); border-bottom:2px solid var(--ink) }
.lgroup__head h3{ font-size:1.15rem }
.lgroup__head p{ font-size:.85rem; color:var(--muted) }
.lgroup ul{ display:flex; flex-direction:column }
.lgroup li{ display:grid; grid-template-columns:3.4rem 1fr; gap:.3rem .9rem; align-items:center; padding:.8rem 1.2rem; border-top:1px solid var(--line) }
.lgroup li:first-child{ border-top:0 }
.lgroup__xp{ grid-row:span 2; display:grid; place-items:center; width:3.2rem; height:3.2rem; border-radius:1rem; border:2px solid var(--ink); background:var(--gold); font-family:'Fredoka',sans-serif; font-weight:700; line-height:1; text-align:center }
.lgroup__xp small{ display:block; font-size:.6rem }
.lgroup__txt{ display:flex; flex-direction:column; gap:.1rem }
.lgroup__txt small{ font-size:.82rem; color:var(--muted); line-height:1.4 }
.lgroup__lim{ grid-column:2; justify-self:start; font-size:.7rem; font-weight:800; padding:.1rem .55rem; border-radius:9999px; background:var(--surface); color:var(--subtle) }
.lnote{ margin-top:1.4rem; padding:1rem 1.2rem; border-radius:1.2rem; background:#FFF8E1; border:2px solid #F1D48A; font-size:.9rem; line-height:1.55 }
.lfaq{ display:grid; grid-template-columns:1fr; gap:.7rem; margin-top:1.4rem }
@media (min-width:900px){ .lfaq{ grid-template-columns:1fr 1fr } }
.lfaq__i{ border:2px solid var(--ink); border-radius:1.1rem; background:#fff; padding:.9rem 1.1rem }
.lfaq__i summary{ font-weight:800; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem }
.lfaq__i summary::after{ content:'+'; font-family:'Fredoka',sans-serif; font-size:1.3rem; line-height:1 }
.lfaq__i[open] summary::after{ content:'–' }
.lfaq__i p{ margin-top:.6rem; color:var(--muted); line-height:1.6; font-size:.92rem }
.lcta{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:2rem; padding:1.4rem 1.6rem; border-radius:1.5rem; color:#fff; background:linear-gradient(135deg,#0A1240,#2456F0) }
.lcta > div{ display:flex; flex-direction:column; gap:.2rem }
.lcta b{ font-family:'Fredoka',sans-serif; font-size:1.5rem }
.lcta span{ color:rgba(255,255,255,.8) }

/* ---------- accesso: schede, invito a registrarsi */
.authtabs{ display:grid; grid-template-columns:1fr 1fr; padding:.3rem; border-radius:9999px; background:var(--surface); border:2px solid var(--line); margin-bottom:1.2rem }
.authtabs a{ text-align:center; font-weight:800; font-size:.95rem; padding:.65rem .8rem; border-radius:9999px; color:var(--muted); text-decoration:none; transition:background .2s, color .2s }
.authtabs a:hover{ color:var(--ink) }
.authtabs a.is-on{ background:var(--ink); color:#fff; box-shadow:0 .2rem 0 rgba(10,18,64,.25) }
.authnew{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:1.4rem; padding:1.1rem 1.2rem; border-radius:1.2rem; background:linear-gradient(135deg,#FFF8E1,#EEF3FF); border:2px solid var(--ink) }
.authnew > div{ display:flex; flex-direction:column; gap:.2rem; flex:1; min-width:14rem }
.authnew b{ font-family:'Fredoka',sans-serif; font-size:1.15rem; color:var(--ink) }
.authnew span{ font-size:.875rem; color:var(--muted); line-height:1.45 }
.authnew__btn{ display:inline-flex; align-items:center; gap:.4rem; font-weight:800; padding:.7rem 1.3rem; border-radius:9999px; border:2px solid var(--ink); background:var(--gold); color:var(--ink); text-decoration:none; box-shadow:0 .25rem 0 var(--ink); white-space:nowrap; transition:transform .15s }
.authnew__btn:hover{ transform:translateY(-2px) }
.authnew__btn span{ font-size:1.1rem }
.authside__more{ display:inline-block; margin-top:1rem; font-weight:800; font-size:.9rem; color:var(--accent); text-decoration:none }
.authside__more:hover{ text-decoration:underline }
.authtabs ~ .authcard__p{ margin-bottom:1.1rem } @media (max-width:480px){ .authtabs a{ font-size:.85rem; padding:.6rem .4rem } }
.authgo{ display:grid; grid-template-columns:1fr; gap:.8rem; margin-top:1.2rem; text-align:left }
@media (min-width:560px){ .authgo{ grid-template-columns:1fr 1fr } }
.authgo__b{ display:flex; flex-direction:column; gap:.25rem; padding:1.1rem 1.2rem; border:2px solid var(--ink); border-radius:1.2rem; background:#fff; color:var(--ink); text-decoration:none; box-shadow:0 .3rem 0 var(--ink); transition:transform .15s }
.authgo__b:hover{ transform:translateY(-2px) }
.authgo__b span{ font-size:1.6rem }
.authgo__b b{ font-family:'Fredoka',sans-serif; font-size:1.2rem }
.authgo__b small{ font-size:.82rem; color:var(--muted); line-height:1.4 }
.authgo__b--admin{ background:var(--ink); color:#fff }
.authgo__b--admin small{ color:rgba(255,255,255,.75) }

/* ---------- icone (Lucide / Simple Icons) e bandiere */
.ico{ display:inline-block; flex:none; vertical-align:-.15em }
.flag{ display:inline-block; width:1.3em; height:.975em; border-radius:.15em; box-shadow:0 0 0 1px rgba(10,18,64,.15); vertical-align:-.12em; background-size:cover }

.ico-fire{ color:#FF6A00 }
.medal--1{ color:#E0A800 } .medal--2{ color:#8A97AD } .medal--3{ color:#B8702F }
.ubadges li span .ico{ color:var(--acc) } .ubadges li.is-special span .ico{ color:#8A5A00 }
.pinvite .ico{ flex:none; color:#8A5A00; margin-top:.1rem }
.iempty .ico{ color:var(--accent); flex:none } .disc__empty .ico{ color:var(--accent); flex:none }
.istarter .ico{ flex:none }
.ifield__ico{ display:inline-flex; align-items:center; gap:.35rem }
.inv__note .ico{ color:#E08A00; margin-right:.2rem }
.lnote .ico{ color:#8A5A00; margin-right:.2rem }
.uhead__meta span, .ulink, .ustaff, .cmt__rank, .mbox__tag, .missions__bonus, .evact__b, .earn__ok{ display:inline-flex; align-items:center; gap:.35rem }
.uevents a > span .ico{ color:var(--accent) }
.msteps i .ico{ color:#fff }
.pswatch span{ display:inline-flex; align-items:center; gap:.25rem }
.authgo__b span .icon{ width:1.6rem; height:1.6rem } .member__meta .icon{ width:1em; height:1em; vertical-align:-.12em }

/* ---------- /card: testata, schede */
.chead{ display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:stretch }
@media (min-width:960px){ .chead{ grid-template-columns:minmax(0,26rem) 1fr } }
.chead > .lcard{ max-width:none }
.chead__panel{ display:flex; flex-direction:column; gap:1rem; padding:1.3rem; border:2px solid var(--ink); border-radius:1.5rem; background:#fff; box-shadow:0 .35rem 0 var(--ink) }
.chead__stats{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem }
@media (min-width:1200px){ .chead__stats{ grid-template-columns:repeat(4,1fr) } }
.cstat{ display:flex; flex-direction:column; gap:.15rem; padding:.8rem .9rem; border-radius:1rem; background:var(--surface); min-width:0 }
.cstat small{ font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--subtle) }
.cstat b{ display:inline-flex; align-items:center; gap:.3rem; font-family:'Fredoka',sans-serif; font-size:1.7rem; line-height:1.1; color:var(--ink) }
.cstat span{ font-size:.78rem; color:var(--muted) }
.cstat__bar{ height:.5rem; border-radius:9999px; background:#fff; border:1px solid var(--line); overflow:hidden; margin-top:.35rem }
.cstat__bar i{ display:block; height:100%; background:#12A37F }
.chead__act{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding-top:.3rem }
.chead__act .checkin{ display:inline-flex; align-items:center; gap:.5rem }
.chead__act .checkin small{ font-family:'Nunito',sans-serif; font-size:.8rem; font-weight:800; padding:.15rem .5rem; border-radius:9999px; background:rgba(10,18,64,.12) }
.chead__act p{ flex:1; min-width:12rem; font-size:.875rem; color:var(--muted) }
.ctabs{ position:relative; display:flex; gap:.35rem; padding:.35rem; border:2px solid var(--ink); border-radius:9999px; background:#fff; overflow-x:auto; scrollbar-width:none; box-shadow:0 .25rem 0 var(--ink) }
.ctabs::-webkit-scrollbar{ display:none }
.ctabs button{ position:relative; flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; white-space:nowrap; font:inherit; font-weight:800; font-size:.9rem; padding:.6rem 1rem; border:0; border-radius:9999px; background:transparent; color:var(--muted); cursor:pointer }
.ctabs button:hover{ color:var(--ink); background:var(--surface) }
.ctabs button.is-on{ background:var(--ink); color:#fff }
.ctabs__dot{ position:absolute; top:.45rem; right:.6rem; width:.5rem; height:.5rem; border-radius:50%; background:#E11D48 }
.cearn{ display:grid; grid-template-columns:1fr; gap:1.2rem }
@media (min-width:1000px){ .cearn{ grid-template-columns:1fr 1fr } .cearn > .cnote{ grid-column:1/-1 } }
.cearn__g{ padding:1.1rem 1.3rem; border:2px solid var(--ink); border-radius:1.4rem; background:#fff; box-shadow:0 .35rem 0 var(--ink) }
.cearn__g h3{ font-size:1.1rem }
.cearn__g .earn{ margin-top:.4rem }
.cearn__g .earn__i:first-child{ border-top:0 }
.cnote{ font-size:.875rem; color:var(--muted); padding:.9rem 1.1rem; border-radius:1rem; background:#fff; border:1px solid var(--line) }
.ledger--full{ max-height:none }
@media (max-width:600px){ .ctabs button{ flex:none; padding:.55rem .8rem; font-size:.82rem } }
.phero--compact .phero__grid{ padding-bottom:1.8rem } .phero--compact h1{ font-size:clamp(1.8rem,4vw,2.6rem) } .phero--compact + .sec{ padding-top:2rem }

/* ---------- account: privacy e sicurezza */
.acc-nav__sec{ display:none }
@media (min-width:1024px){ .acc-nav__sec{ display:block; font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--subtle); padding:1rem .6rem .2rem } }
.acc-panel__head h2{ display:flex; align-items:center; gap:.5rem }
.acc-panel__head h2 .ico{ color:var(--accent) }
.acc-muted{ color:var(--muted); font-size:.9rem }
.tgls{ display:flex; flex-direction:column }
.tgl{ display:flex; align-items:center; gap:1rem; padding:.8rem 0; border-top:1px solid var(--line); cursor:pointer }
.tgl:first-child{ border-top:0 }
.tgl__t{ flex:1; display:flex; flex-direction:column; gap:.1rem }
.tgl__t b{ font-weight:800; font-size:.95rem }
.tgl__t small{ font-size:.8rem; color:var(--muted) }
.tgl input{ position:absolute; opacity:0; pointer-events:none }
.tgl i{ position:relative; flex:none; width:2.8rem; height:1.6rem; border-radius:9999px; background:#D6DEF7; transition:background .2s }
.tgl i::after{ content:''; position:absolute; top:.2rem; left:.2rem; width:1.2rem; height:1.2rem; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(10,18,64,.3); transition:transform .2s }
.tgl input:checked + i{ background:#12A37F }
.tgl input:checked + i::after{ transform:translateX(1.2rem) }
.tgl input:focus-visible + i{ outline:3px solid rgba(36,86,240,.35); outline-offset:2px }
.tgl.is-off{ opacity:.5; cursor:default }
.vis{ display:grid; grid-template-columns:1fr; gap:.6rem }
@media (min-width:760px){ .vis{ grid-template-columns:repeat(3,1fr) } }
.vis__o{ display:flex; flex-direction:column; align-items:flex-start; gap:.3rem; text-align:left; font:inherit; padding:1rem; border:2px solid var(--line); border-radius:1rem; background:#fff; cursor:pointer; color:var(--ink) }
.vis__o .ico{ color:var(--accent) }
.vis__o small{ font-size:.8rem; color:var(--muted); line-height:1.4 }
.vis__o.is-on{ border-color:var(--ink); background:var(--surface); box-shadow:0 .2rem 0 var(--ink) }
.plist{ display:flex; flex-direction:column }
.plist__i{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.7rem 0; border-top:1px solid var(--line) }
.plist__i:first-child{ border-top:0 }
.plist__i > a{ display:flex; align-items:center; gap:.7rem; color:var(--ink); text-decoration:none; min-width:0 }
.plist__i > a span{ display:flex; flex-direction:column; min-width:0 }
.plist__i small{ color:var(--subtle); font-size:.78rem }
.plist__a{ display:flex; gap:.4rem; flex-wrap:wrap }
.tfa{ display:flex; flex-direction:column; gap:1rem }
.tfa__steps{ display:flex; flex-direction:column; gap:.3rem; padding-left:1.2rem; list-style:decimal; color:var(--muted); font-size:.9rem }
.tfa__qr{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap }
.tfa__qr img{ border:2px solid var(--ink); border-radius:1rem; background:#fff; padding:.4rem }
.tfa__qr code{ font-size:.9rem; padding:.4rem .7rem; border-radius:.6rem; background:var(--surface); letter-spacing:.08em; word-break:break-all }
.tfa__row{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center }
.tfa__row input{ font:inherit; padding:.55rem .9rem; border:2px solid var(--line); border-radius:9999px; background:var(--surface); min-width:10rem }
.tfa__in{ font-family:ui-monospace,monospace !important; font-size:1.3rem !important; letter-spacing:.3em; width:9rem; text-align:center }
.tfa__codes{ padding:1rem 1.2rem; border-radius:1rem; background:#FFF8E1; border:2px solid #F1D48A; display:flex; flex-direction:column; gap:.6rem }
.tfa__codes p{ font-size:.85rem; color:var(--muted) }
.tfa__codes ul{ display:grid; grid-template-columns:repeat(auto-fill,minmax(8rem,1fr)); gap:.4rem }
.tfa__codes code{ display:block; padding:.35rem .5rem; border-radius:.5rem; background:#fff; text-align:center; font-weight:700 }
.tfa__on p{ display:flex; align-items:center; gap:.4rem; color:#11683C; font-weight:800; margin-bottom:.6rem }
.dev{ display:flex; flex-direction:column }
.dev li{ display:flex; align-items:center; gap:.8rem; padding:.7rem 0; border-top:1px solid var(--line) }
.dev li:first-child{ border-top:0 }
.dev__i{ flex:none; display:grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:.7rem; background:var(--surface); color:var(--accent) }
.dev li.is-fail .dev__i{ background:#FDE8DD; color:#C2410C }
.dev__t{ flex:1; display:flex; flex-direction:column; min-width:0 }
.dev__t b{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-size:.92rem }
.dev__t em{ font-style:normal; font-size:.65rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.1rem .45rem; border-radius:9999px; background:#DDF7E8; color:#11683C }
.dev__t small{ font-size:.78rem; color:var(--subtle) }
.dev__m{ font-weight:700; color:var(--subtle) }
.clog{ display:flex; flex-direction:column; gap:.4rem; font-size:.88rem }
.clog small{ color:var(--subtle); margin-left:.3rem }

/* ---------- profilo: segui, blocca, profilo protetto */
.uact{ position:relative; display:flex; gap:.5rem; margin-bottom:.3rem }
.uact__b{ display:inline-flex; align-items:center; gap:.4rem; font:inherit; font-weight:800; font-size:.9rem; padding:.55rem 1.1rem; border-radius:9999px; border:2px solid var(--ink); background:#fff; color:var(--ink); cursor:pointer; text-decoration:none; box-shadow:0 .2rem 0 var(--ink) }
.uact__b--go{ background:var(--acc, var(--accent)); border-color:var(--ink); color:#fff }
.uact__b.is-on{ background:var(--surface) }
.uact__b--icon{ padding:.55rem .7rem }
.uact__b:disabled{ opacity:.6 }
.uact__m{ position:absolute; top:calc(100% + .4rem); left:0; z-index:20; min-width:14rem; padding:.4rem; background:#fff; border:2px solid var(--ink); border-radius:1rem; box-shadow:0 .3rem 0 var(--ink); display:flex; flex-direction:column }
.uact__m button, .uact__m a{ display:flex; align-items:center; gap:.5rem; font:inherit; font-weight:700; font-size:.88rem; padding:.55rem .7rem; border:0; background:none; border-radius:.6rem; color:var(--ink); cursor:pointer; text-decoration:none; text-align:left }
.uact__m button:hover, .uact__m a:hover{ background:var(--surface) }
.uact__m .is-danger{ color:#C2410C }
.ubody--one{ grid-template-columns:1fr !important }
.ulock{ max-width:32rem; margin:1rem auto 3rem; padding:2rem; text-align:center; border:2px solid var(--ink); border-radius:1.5rem; background:#fff; box-shadow:0 .35rem 0 var(--ink); display:flex; flex-direction:column; align-items:center; gap:.8rem }
.ulock__i{ display:grid; place-items:center; width:4rem; height:4rem; border-radius:50%; background:var(--surface); color:var(--acc, var(--accent)) }
.ulock h2{ font-size:1.4rem }
.ulock p{ color:var(--muted); line-height:1.55 }
.ulock__a{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; align-items:center }
.ulock__a .checkin{ text-decoration:none; font-size:1.05rem }
.ulock .uact{ justify-content:center }
.tfa-login{ display:flex; flex-direction:column; gap:.8rem } .tfa-login input{ font-family:ui-monospace,monospace; font-size:1.3rem; letter-spacing:.25em } .tfa-login__err{ color:#C2410C; font-weight:700; font-size:.9rem } .tfa-login .checkin{ align-self:flex-start }

/* ---------- campanella notifiche */
.hbell{ position:relative; display:inline-flex; align-items:center; margin-right:.3rem }
.hbell__b{ position:relative; display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; cursor:pointer }
.hbell__b:hover{ background:rgba(255,255,255,.16) }
.hbell__n{ position:absolute; top:-.2rem; right:-.25rem; min-width:1.15rem; height:1.15rem; padding:0 .25rem; border-radius:9999px; background:#E11D48; color:#fff; font-style:normal; font-size:.66rem; font-weight:800; display:grid; place-items:center; border:2px solid #1A2A9E }
.hbell__p{ position:absolute; top:calc(100% + .6rem); right:-4rem; z-index:130; width:min(22rem, 92vw); max-height:70vh; overflow:auto; background:#fff; color:var(--ink); border:2px solid var(--ink); border-radius:1.2rem; box-shadow:0 .4rem 0 var(--ink), 0 20px 40px rgba(10,18,64,.25); text-align:left }
.hbell__h{ display:flex; justify-content:space-between; align-items:center; padding:.8rem 1rem; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff }
.hbell__h a{ font-size:.8rem; font-weight:800; color:var(--accent) }
.hbell__p ul{ display:flex; flex-direction:column }
.hbell__p li a{ display:flex; gap:.7rem; align-items:flex-start; padding:.75rem 1rem; color:var(--ink); text-decoration:none; font-size:.86rem; line-height:1.4; border-top:1px solid var(--line) }
.hbell__p li:first-child a{ border-top:0 }
.hbell__p li a:hover{ background:var(--surface) }
.hbell__p li.is-new a{ background:#F2F6FF } .hbell__p li.is-new a::after{ content:''; flex:none; width:.5rem; height:.5rem; border-radius:50%; background:var(--accent); margin-top:.35rem }
.hbell__p li .icon{ flex:none; width:1.1rem; height:1.1rem; color:var(--accent); margin-top:.1rem }
.hbell__p li span{ flex:1 } .hbell__p li small{ display:block; color:var(--subtle); font-size:.72rem; margin-top:.15rem }
.hbell__e{ padding:1.2rem 1rem; color:var(--muted); font-size:.88rem }
@media (max-width:1100px){ .hbell{ display:none } }
.nlist{ max-width:44rem; margin:0 auto; background:#fff; border:2px solid var(--ink); border-radius:1.4rem; box-shadow:0 .35rem 0 var(--ink); overflow:hidden }
.nlist li a{ display:flex; gap:.9rem; align-items:flex-start; padding:1rem 1.2rem; color:var(--ink); text-decoration:none; border-top:1px solid var(--line) }
.nlist li:first-child a{ border-top:0 }
.nlist li a:hover{ background:var(--surface) }
.nlist li.is-new a{ background:#F2F6FF }
.nlist__i{ flex:none; display:grid; place-items:center; width:2.3rem; height:2.3rem; border-radius:.8rem; background:var(--surface); color:var(--accent) }
.nlist__t{ flex:1; line-height:1.45 } .nlist__t small{ display:block; color:var(--subtle); font-size:.78rem; margin-top:.15rem }
.nlist__e{ padding:2rem; text-align:center; display:flex; flex-direction:column; gap:.6rem; align-items:center } .nlist__e p{ color:var(--muted) }
.nlist__p{ display:flex; justify-content:space-between; align-items:center; padding:.8rem 1.2rem; border-top:1px solid var(--line); font-size:.85rem; color:var(--muted) }

/* ---------- achievement e feed */
.achs__n{ font-family:'Nunito',sans-serif; font-size:.8rem; font-weight:800; padding:.15rem .6rem; border-radius:9999px; background:var(--gold); color:var(--ink) }
.achs{ display:grid; grid-template-columns:1fr; gap:.6rem }
@media (min-width:760px){ .achs{ grid-template-columns:1fr 1fr } }
.achs li{ display:flex; align-items:center; gap:.8rem; padding:.8rem .9rem; border:2px solid var(--line); border-radius:1rem; background:#fff }
.achs li.is-on{ border-color:#9AD9B5; background:#F1FBF5 }
.achs__i{ flex:none; display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:.9rem; background:var(--surface); color:var(--subtle) }
.achs li.is-on .achs__i{ background:var(--gold); color:var(--ink) }
.achs__t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.15rem }
.achs__t b{ font-size:.92rem } .achs__t small{ font-size:.76rem; color:var(--muted); line-height:1.35 }
.achs__bar{ height:.4rem; border-radius:9999px; background:var(--surface-2); overflow:hidden; margin-top:.25rem } .achs__bar i{ display:block; height:100%; background:var(--accent); border-radius:inherit }
.achs__v{ font-size:.78rem; font-weight:800; color:var(--subtle); white-space:nowrap } .achs li.is-on .achs__v{ color:#11683C }
.feed{ display:flex; flex-direction:column }
.feed li{ display:flex; gap:.7rem; align-items:flex-start; padding:.7rem 0; border-top:1px solid var(--line) } .feed li:first-child{ border-top:0 }
.feed__t{ font-size:.9rem; line-height:1.45 } .feed__t a{ color:var(--ink); font-weight:700 } .feed__t a:hover{ color:var(--accent) }
.feed__t small{ display:flex; align-items:center; gap:.3rem; color:var(--subtle); font-size:.75rem; margin-top:.15rem }
.flw-row{ display:inline-flex; gap:.8rem }
.flw{ font:inherit; font-size:.9rem; color:var(--muted); background:none; border:0; padding:0; cursor:pointer } .flw b{ color:var(--ink) } .flw:hover{ color:var(--accent) }
.flw-m{ position:fixed; inset:0; z-index:150; background:rgba(10,18,64,.45); display:grid; place-items:center; padding:1rem }
.flw-m__p{ width:min(26rem,100%); max-height:80vh; overflow:auto; background:#fff; border:2px solid var(--ink); border-radius:1.2rem; box-shadow:0 .35rem 0 var(--ink) }
.flw-m__p header{ display:flex; justify-content:space-between; align-items:center; padding:.9rem 1.1rem; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff }
.flw-m__p header button{ font-size:1.4rem; line-height:1; background:none; border:0; cursor:pointer; color:var(--muted) }
.flw-m__p ul{ display:flex; flex-direction:column } .flw-m__p li a{ display:flex; align-items:center; gap:.7rem; padding:.7rem 1.1rem; color:var(--ink); text-decoration:none; border-top:1px solid var(--line) }
.flw-m__p li:first-child a{ border-top:0 } .flw-m__p li a:hover{ background:var(--surface) } .flw-m__p li span{ display:flex; flex-direction:column } .flw-m__p small{ color:var(--subtle); font-size:.76rem }
.flw-m__p > p{ padding:1.2rem; color:var(--muted) }
.ubox__n{ font-family:'Nunito',sans-serif; font-size:.78rem; font-weight:800; color:var(--subtle); margin-left:.3rem }
.uach{ display:flex; flex-wrap:wrap; gap:.5rem }
.uach li{ display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .8rem .35rem .35rem; border-radius:9999px; background:#F1FBF5; border:2px solid #9AD9B5; font-size:.85rem }
.uach li span{ display:grid; place-items:center; width:1.9rem; height:1.9rem; border-radius:50%; background:var(--gold); color:var(--ink) }
.wcal{ display:grid; grid-template-columns:repeat(7,1fr); gap:.3rem; margin:.2rem 0 .4rem }
.wcal li{ display:flex; flex-direction:column; align-items:center; gap:.2rem; padding:.4rem .1rem; border-radius:.7rem; border:2px solid var(--line); background:#fff; color:var(--subtle); min-height:3.2rem }
.wcal small{ font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em }
.wcal li.is-done{ background:#DDF7E8; border-color:#9AD9B5; color:#11683C }
.wcal li.is-today{ border-color:var(--ink) }
.wcal li.is-big{ background:#FFF4D6; border-color:#F1D48A; color:#8A5A00 } .wcal li.is-big.is-done{ background:var(--gold); color:var(--ink) }
.bday{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:1.1rem 1.3rem; border-radius:1.4rem; border:2px solid var(--ink); box-shadow:0 .35rem 0 var(--ink); background:linear-gradient(135deg,#FFF3C4,#FFD9EC) }
.bday__i{ display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%; background:#fff; color:#E11D48; flex:none }
.bday > div{ flex:1; min-width:14rem } .bday b{ font-family:'Fredoka',sans-serif; font-size:1.2rem } .bday p{ color:var(--muted); font-size:.9rem }
.pbday__row{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem } .pbday select{ font:inherit; padding:.55rem .9rem; border:2px solid var(--line); border-radius:9999px; background:var(--surface) }
.pset__opt .ico{ vertical-align:-.15em; color:#E11D48 }
.hbell__n[hidden]{ display:none }
.hbell__b{ width:2.2rem; height:2.2rem }
/* con la campanella l'orologio "Italy time" lascia spazio al menu sugli schermi medi */
@media (max-width:1440px){ html[data-auth] .hdr-right .clock{ display:none } }

/* ---------- personalizzazioni sbloccabili */
.nc--blue{ color:#2456F0 !important } .nc--green{ color:#12A37F !important } .nc--purple{ color:#7C4DFF !important }
.nc--pink{ color:#E11D74 !important } .nc--orange{ color:#E0701B !important }
.nc--gold{ background:linear-gradient(90deg,#B8860B,#F2C94C,#B8860B); -webkit-background-clip:text; background-clip:text; color:transparent !important }
.nc--rainbow{ background:linear-gradient(90deg,#FF4D8D,#F28C0C,#E0B400,#12A37F,#0EA5E9,#7C4DFF); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent !important; animation:ncShift 6s linear infinite }
.nc--staff{ background:linear-gradient(90deg,#2456F0,#0EA5E9); -webkit-background-clip:text; background-clip:text; color:transparent !important }
@keyframes ncShift{ to{ background-position:200% center } }
.utitle{ display:inline-block; font-style:normal; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.2rem .6rem; border-radius:9999px; background:var(--ink); color:#fff }
.psel{ font:inherit; padding:.65rem 1rem; border:2px solid var(--line); border-radius:1rem; background:var(--surface); max-width:26rem }
.pnc{ display:grid; grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr)); gap:.5rem }
.pnc__o{ display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; padding:.6rem .7rem; border:2px solid var(--line); border-radius:.9rem; background:#fff; font:inherit; cursor:pointer; text-align:left }
.pnc__o b{ font-family:'Fredoka',sans-serif; font-size:1.05rem; color:var(--ink); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pnc__o small{ font-size:.7rem; color:var(--subtle); display:inline-flex; align-items:center; gap:.2rem }
.pnc__o.is-on{ border-color:var(--ink); box-shadow:0 .2rem 0 var(--ink) } .pnc__o.is-locked{ opacity:.55; cursor:not-allowed }
.pskins{ display:grid; grid-template-columns:repeat(auto-fill,minmax(8rem,1fr)); gap:.6rem }
.pskin{ display:flex; flex-direction:column; gap:.35rem; padding:.6rem; border:2px solid var(--line); border-radius:1rem; background:#fff; font:inherit; cursor:pointer; text-align:left }
.pskin b{ font-size:.82rem } .pskin small{ font-size:.66rem; color:var(--subtle); display:flex; gap:.2rem; align-items:center }
.pskin.is-on{ border-color:var(--ink); box-shadow:0 .2rem 0 var(--ink) } .pskin.is-locked{ opacity:.55; cursor:not-allowed }
.pskin__c{ display:block; aspect-ratio:1.586/1; border-radius:.6rem; background:var(--skin, var(--cg)); border:2px solid var(--ink); position:relative; overflow:hidden }
/* grafiche della card */
.lcard--skin-midnight{ --skin:linear-gradient(145deg,#1B1F3B 0%,#0A0D1F 60%,#23285A 100%); color:#E7ECFF !important }
.lcard--skin-neon{ --skin:linear-gradient(145deg,#0A0D1F 0%,#1A0B3B 100%); color:#fff !important }
.lcard.lcard--skin-neon{ box-shadow:0 0 0 2px #0A0D1F, 0 0 18px rgba(255,77,141,.55), 0 .45rem 0 var(--ink) !important }
.lcard--skin-neon::before{ content:''; position:absolute; inset:.35rem; border-radius:1.1rem; border:2px solid #FF4D8D; box-shadow:0 0 12px #FF4D8D, inset 0 0 12px rgba(94,225,255,.5); pointer-events:none }
.lcard--skin-aurora{ --skin:linear-gradient(135deg,#12A37F 0%,#0EA5E9 45%,#7C4DFF 100%); color:#fff !important }
.lcard--skin-holo{ --skin:linear-gradient(120deg,#FFD6F2,#C9F2FF,#E4FFD1,#FFF2C2,#E0D4FF,#FFD6F2); background-size:300% 300% !important; animation:holo 8s ease infinite; color:#2A1A55 !important }
@keyframes holo{ 0%{ background-position:0% 50% } 50%{ background-position:100% 50% } 100%{ background-position:0% 50% } }
.lcard[class*="lcard--skin-"]{ background:var(--skin) !important }
.pskin__c.lcard--skin-classic{ --skin:linear-gradient(135deg,#FFD24D 0%,#E08A00 100%) }
.pskin__c.lcard--skin-neon::before{ inset:.2rem; border-radius:.4rem }
/* sfondi animati */
.ucover--nebula{ background:radial-gradient(40% 60% at 20% 30%, rgba(124,77,255,.8), transparent 70%), radial-gradient(35% 55% at 80% 60%, rgba(255,77,141,.7), transparent 70%), radial-gradient(40% 60% at 50% 100%, rgba(14,165,233,.7), transparent 70%), #0A1240; background-size:160% 160%; animation:nebula 18s ease-in-out infinite alternate }
@keyframes nebula{ to{ background-position:100% 60%, 0% 40%, 50% 0% } }
.ucover--waves{ background:linear-gradient(180deg,#0EA5E9 0%,#2456F0 60%,#0A1240 100%); position:relative }
.ucover--waves::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:60%; opacity:.35; background:repeating-radial-gradient(ellipse 60% 30% at 50% 120%, #fff 0 2px, transparent 3px 26px); animation:waves 9s linear infinite }
@keyframes waves{ to{ transform:translateY(-26px) } }
@media (prefers-reduced-motion:reduce){ .nc--rainbow, .lcard--skin-holo, .ucover--nebula, .ucover--waves::after{ animation:none } }

/* ---------- profilo pubblico v3 */
.uhead__title{ margin:.35rem 0 .1rem }
.upills{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem }
.upill{ display:flex; align-items:center; gap:.55rem; padding:.55rem 1rem; border:2px solid var(--line); border-radius:9999px; background:var(--surface) }
.upill b{ font-family:'Fredoka',sans-serif; font-size:1.2rem; color:var(--ink) } .upill b small{ font-size:.75rem; color:var(--subtle) }
.upill span{ font-size:.8rem; font-weight:700; color:var(--muted) }
.upill--tier{ padding:.3rem 1rem .3rem .35rem } .uring{ color:var(--ink); flex:none }
.ushow{ display:grid; grid-template-columns:repeat(auto-fill,minmax(14rem,1fr)); gap:.75rem; margin-top:1.1rem }
.ushow__i{ display:flex; align-items:center; gap:.75rem; padding:.8rem 1rem; border:2px solid var(--ink); border-radius:1.1rem; background:#fff; box-shadow:0 .25rem 0 var(--ink); color:var(--ink); text-decoration:none }
.ushow__i > span{ display:grid; place-items:center; width:2.75rem; height:2.75rem; border-radius:.85rem; background:color-mix(in srgb, var(--acc) 16%, #fff); color:var(--acc); flex:none }
.ushow__i--badge > span{ background:#FFF3C4; color:#9A6B00 }
.ushow__i img{ width:2.75rem; height:2.75rem; border-radius:.85rem; object-fit:cover; flex:none }
.ushow__i small{ display:block; font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--subtle) }
.ushow__i b{ font-size:.95rem; line-height:1.25 }
a.ushow__i:hover{ transform:translateY(-2px) }
.utabs__bar{ display:flex; gap:.35rem; overflow-x:auto; padding:.3rem; margin-bottom:1rem; border:2px solid var(--line); border-radius:1.1rem; background:var(--surface); scrollbar-width:none }
.utabs__t{ display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; padding:.55rem .95rem; border:0; border-radius:.8rem; background:none; font:inherit; font-weight:700; font-size:.88rem; color:var(--muted); cursor:pointer }
.utabs__t small{ font-size:.7rem; padding:.05rem .45rem; border-radius:9999px; background:var(--line); color:var(--ink) }
.utabs__t.is-on{ background:var(--ink); color:#fff } .utabs__t.is-on small{ background:#fff }
.utabs__p > .ubox + .ubox{ margin-top:1rem }
.udet{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; font-size:.9rem; color:var(--muted) }
.udet li{ display:flex; align-items:center; gap:.5rem }
.upills, .ushow{ padding:0 1.25rem } @media (min-width:800px){ .upills, .ushow{ padding-left:2.8rem } }
@media (max-width:640px){ .upill{ padding:.45rem .8rem } .upill b{ font-size:1.05rem } .uhead .pact button, .uhead .pact a{ white-space:nowrap } }

/* ---------- menu dell'account: icone Lucide, non segue lo scroll */
.acc-nav__i .ico{ color:var(--accent); flex:none }
.acc-nav__i.is-on .ico{ color:var(--gold) }
.acc-nav__ext{ margin-left:auto; opacity:.6 }
@media (min-width:1024px){ .acc-body{ align-items:start } .acc-nav{ position:static } }

/* firma nel footer */
.made{ display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap }
.made__h{ color:#FF4D6D; animation:beat 1.6s ease-in-out infinite }
.made .alink{ font-weight:700; color:inherit }
@keyframes beat{ 0%,100%{ transform:scale(1) } 15%{ transform:scale(1.2) } 30%{ transform:scale(1) } }
@media (prefers-reduced-motion:reduce){ .made__h{ animation:none } }

/* ---------- novita': finestra e guida */
.wn{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:1rem }
.wn__bg{ position:absolute; inset:0; background:rgba(10,18,64,.55); backdrop-filter:blur(3px) }
.wn__d{ position:relative; width:min(34rem,100%); max-height:calc(100dvh - 2rem); overflow:auto; background:#fff; border:2px solid var(--ink); border-radius:1.5rem; box-shadow:0 .45rem 0 var(--ink); padding:1.6rem 1.5rem 1.4rem; animation:wnIn .25s ease-out }
@keyframes wnIn{ from{ opacity:0; transform:translateY(12px) scale(.98) } }
.wn__x{ position:absolute; top:.9rem; right:.9rem; width:2.2rem; height:2.2rem; display:grid; place-items:center; border:0; border-radius:9999px; background:var(--surface); color:var(--ink); cursor:pointer }
.wn__k{ display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent) }
.wn__k .icon{ width:1rem; height:1rem }
.wn__d h2{ font-family:'Fredoka',sans-serif; font-size:1.5rem; line-height:1.15; margin:.4rem 2rem .35rem 0; color:var(--ink) }
.wn__p{ color:var(--muted); margin:0 0 1rem }
.wn__l{ list-style:none; margin:0 0 1.2rem; padding:0; display:grid; gap:.7rem }
.wn__l li{ display:flex; gap:.75rem; align-items:flex-start }
.wn__l li > span{ flex:none; display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:.8rem; background:color-mix(in srgb, var(--accent) 12%, #fff); color:var(--accent) }
.wn__l .icon{ width:1.2rem; height:1.2rem }
.wn__l b{ display:block; color:var(--ink); font-size:.95rem } .wn__l small{ color:var(--muted); font-size:.85rem; line-height:1.4 }
.wn__a{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center }
@media (prefers-reduced-motion:reduce){ .wn__d{ animation:none } }
.wn-hero h1{ color:#fff; margin:0; max-width:none } .wn-hero__k{ display:inline-flex; align-items:center; gap:.4rem; color:var(--gold); font-weight:800; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; margin:0 }
.wn-hero__p{ color:rgba(255,255,255,.85); max-width:42rem; font-size:1.05rem }
.wn-toc{ list-style:none; padding:0; margin:.6rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem }
.wn-toc a{ display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .85rem; border-radius:9999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff; font-weight:700; font-size:.85rem; text-decoration:none }
.wn-toc a:hover{ background:rgba(255,255,255,.22) }
.wn-list{ display:grid; gap:1.2rem; max-width:52rem }
.wn-card{ background:#fff; border:2px solid var(--ink); border-radius:1.4rem; box-shadow:0 .35rem 0 var(--ink); padding:1.5rem; scroll-margin-top:6rem }
.wn-card__h{ display:flex; gap:1rem; align-items:flex-start; margin-bottom:1rem }
.wn-card__i{ flex:none; display:grid; place-items:center; width:3.2rem; height:3.2rem; border-radius:1rem; background:color-mix(in srgb, var(--accent) 12%, #fff); color:var(--accent) }
.wn-card__h small{ font-weight:800; color:var(--subtle); letter-spacing:.08em } .wn-card__h h2{ font-family:'Fredoka',sans-serif; margin:.1rem 0 .25rem; color:var(--ink) } .wn-card__h p{ margin:0; color:var(--muted) }
.wn-steps{ margin:0 0 1rem; padding-left:1.3rem; display:grid; gap:.5rem; color:var(--ink) } .wn-steps li::marker{ color:var(--accent); font-weight:800 }
.wn-tip{ display:flex; gap:.5rem; align-items:flex-start; background:#FFF7DB; border-radius:.9rem; padding:.7rem .9rem; color:#6B4E00; font-size:.9rem; margin:0 0 1rem } .wn-tip .ico{ flex:none; margin-top:.15rem }
@media (max-width:640px){ .wn__d{ padding:1.3rem 1.1rem 1.1rem } .wn__d h2{ font-size:1.25rem } .wn__l{ gap:.55rem } .wn__l small{ font-size:.8rem } }
.hbell__p li em, .nlist__t em{ display:block; font-style:normal; font-size:.82rem; color:var(--muted); margin-top:.15rem; line-height:1.35 }

/* banner degli annunci pubblici */
.annb{ position:fixed; z-index:150; right:1rem; bottom:1rem; width:min(24rem, calc(100vw - 2rem)); display:flex; gap:.75rem; align-items:flex-start; padding:1rem 2.6rem 1rem 1rem; background:#fff; border:2px solid var(--ink); border-radius:1.2rem; box-shadow:0 .35rem 0 var(--ink); animation:wnIn .3s ease-out }
.annb__i{ flex:none; display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:.85rem; background:color-mix(in srgb, var(--accent) 12%, #fff); color:var(--accent) } .annb__i .icon{ width:1.25rem; height:1.25rem }
.annb__t b{ display:block; color:var(--ink); line-height:1.25 } .annb__t small{ display:block; color:var(--muted); font-size:.85rem; margin-top:.2rem; line-height:1.4 }
.annb__go{ display:inline-block; margin-top:.5rem; font-weight:800; font-size:.85rem; color:var(--accent) }
.annb__x{ position:absolute; top:.6rem; right:.6rem; width:2rem; height:2rem; display:grid; place-items:center; border:0; border-radius:9999px; background:var(--surface); color:var(--ink); cursor:pointer }
@media (max-width:1023px){ .annb{ bottom:5.2rem } }
@media (prefers-reduced-motion:reduce){ .annb{ animation:none } }

/* ---------- blocco "account gratuito" nelle pagine che portano traffico */
.perks{ display:grid; gap:1rem; margin-top:2rem; grid-template-columns:1fr }
@media (min-width:640px){ .perks{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .perks{ grid-template-columns:repeat(3,1fr) } }
.perk{ display:flex; flex-direction:column; gap:.5rem; padding:1.35rem; background:#fff; border:2px solid var(--ink); border-radius:1.3rem; box-shadow:0 .3rem 0 var(--ink); color:var(--ink); text-decoration:none; transition:transform .15s ease, box-shadow .15s ease }
.perk:hover{ transform:translateY(-3px); box-shadow:0 .45rem 0 var(--ink) }
.perk__i{ display:grid; place-items:center; width:2.8rem; height:2.8rem; border-radius:.9rem; background:color-mix(in srgb, var(--accent) 12%, #fff); color:var(--accent) }
.perk__i .icon{ width:1.35rem; height:1.35rem }
.perk__t{ font-family:'Fredoka',sans-serif; font-size:1.15rem; margin:.2rem 0 0; line-height:1.2 }
.perk__d{ margin:0; color:var(--muted); font-size:.95rem; line-height:1.5 }
.perks__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.2rem; margin-top:1.8rem }
.perks__note{ color:var(--muted); font-size:.9rem }
.sec--alt + .perks-sec, .perks-sec{ background:var(--bg, #fff) }
@media (max-width:639px){
  .perks{ gap:.7rem } .perk{ display:grid; grid-template-columns:2.6rem 1fr; column-gap:.85rem; padding:1rem; box-shadow:0 .22rem 0 var(--ink) }
  .perk__i{ grid-row:span 2; width:2.6rem; height:2.6rem } .perk__t{ margin:0; font-size:1.05rem } .perk__d{ font-size:.88rem }
}

/* ---------- guida XP su xat */
.xp-h1{ color:#fff; max-width:22ch } .xp-h1 .hl{ display:block }
.phero code, .xp-wrap code{ font-family:ui-monospace,Menlo,monospace; font-size:.9em; padding:.1em .4em; border-radius:.4em; background:rgba(36,86,240,.1); color:var(--accent) }
.phero code{ background:rgba(255,255,255,.14); color:#fff }
.xp-cta{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; margin-top:.4rem }
.xp-ghost{ color:#fff !important; border-color:rgba(255,255,255,.5) !important; background:transparent !important }
.xp-wrap{ max-width:56rem } .xp-wrap .sec__h2{ margin-top:3rem; scroll-margin-top:6rem }
.xp-short{ padding:1.3rem 1.5rem; border:2px solid var(--ink); border-radius:1.3rem; background:#FFF7DB; box-shadow:0 .3rem 0 var(--ink) }
.xp-short > b{ font-family:'Fredoka',sans-serif; font-size:1.2rem; color:var(--ink) } .xp-short ul{ margin:.6rem 0 0; padding-left:1.2rem; display:grid; gap:.45rem; color:var(--ink) }
.xp-steps{ margin:1.2rem 0 0; padding-left:1.4rem; display:grid; gap:.7rem; color:var(--ink); line-height:1.55 } .xp-steps li::marker{ color:var(--accent); font-weight:800 }
.xp-note{ display:flex; gap:.5rem; align-items:center; margin-top:1.2rem; padding:.8rem 1rem; border-radius:1rem; background:color-mix(in srgb, var(--accent) 8%, #fff); color:var(--ink) }
.xp-tables{ display:grid; gap:1.2rem; margin-top:1.4rem } @media (min-width:900px){ .xp-tables{ grid-template-columns:1fr 1fr; align-items:start } }
.xp-table{ border:2px solid var(--ink); border-radius:1.2rem; background:#fff; overflow:hidden; box-shadow:0 .3rem 0 var(--ink) }
.xp-table h3{ margin:0; padding:.9rem 1.1rem; font-family:'Fredoka',sans-serif; font-size:1.1rem; border-bottom:2px solid var(--line) }
.xp-table table{ width:100%; border-collapse:collapse } .xp-table td{ padding:.7rem 1.1rem; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink); font-weight:700; font-size:.95rem }
.xp-table td small{ display:block; font-weight:400; color:var(--muted); font-size:.82rem; margin-top:.15rem; line-height:1.4 }
.xp-n{ text-align:right; white-space:nowrap; color:var(--accent) !important; font-family:'Fredoka',sans-serif; font-size:1.05rem !important }
.xp-sum td{ background:color-mix(in srgb, var(--accent) 8%, #fff); border-bottom:0 }
.xp-tiers{ list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)) }
.xp-tier{ padding:1rem 1.1rem; border-radius:1.1rem; border:2px solid var(--ink); color:#fff; box-shadow:0 .3rem 0 var(--ink) } .xp-tier b{ display:block; font-family:'Fredoka',sans-serif; font-size:1.25rem } .xp-tier span{ font-size:.88rem; opacity:.9 }
.xp-tier--bronze{ background:linear-gradient(135deg,#C07A3E,#8A4F1F) } .xp-tier--silver{ background:linear-gradient(135deg,#A9B4C8,#6B778F) }
.xp-tier--gold{ background:linear-gradient(135deg,#F2C94C,#C98A00); color:#3A2800 } .xp-tier--diamond{ background:linear-gradient(135deg,#7FE3FF,#5B7CFF) }
.xp-wrap .faq{ margin-top:1.2rem }
.xp-final{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; margin-top:3rem; padding:1.4rem 1.5rem; border-radius:1.3rem; background:var(--ink); color:#fff }
.xp-final b{ display:block; font-family:'Fredoka',sans-serif; font-size:1.3rem } .xp-final span{ color:rgba(255,255,255,.8) }
.xp-more{ margin-top:1.4rem; color:var(--muted) }
/* ---------- classifiche */
.lb-grid{ display:grid; gap:1.4rem } @media (min-width:900px){ .lb-grid{ grid-template-columns:1fr 1fr; align-items:start } }
.lb-how{ display:flex; gap:.5rem; align-items:flex-start; margin:.8rem .2rem 0; color:var(--muted); font-size:.9rem; line-height:1.5 } .lb-how .ico{ flex:none; margin-top:.2rem; color:var(--accent) }
.lb-more{ display:grid; gap:.9rem; margin-top:2.2rem } @media (min-width:900px){ .lb-more{ grid-template-columns:repeat(3,1fr) } }
.lb-card{ display:flex; gap:.8rem; align-items:flex-start; padding:1rem 1.1rem; background:#fff; border:2px solid var(--ink); border-radius:1.1rem; box-shadow:0 .25rem 0 var(--ink); color:var(--ink); text-decoration:none }
.lb-card .ico{ flex:none; color:var(--accent); margin-top:.1rem } .lb-card b{ display:block } .lb-card small{ display:block; color:var(--muted); font-size:.85rem; margin-top:.15rem }
.lb-card:hover{ transform:translateY(-2px) }
.flink--light{ color:#fff !important; text-decoration:underline; text-underline-offset:.2em }
/* ---------- xat powers */
.pw-list{ display:grid; gap:1.3rem; margin-top:1.4rem }
.pw{ display:grid; background:#fff; border:2px solid var(--ink); border-radius:1.4rem; overflow:hidden; box-shadow:0 .35rem 0 var(--ink); scroll-margin-top:6rem }
@media (min-width:820px){ .pw{ grid-template-columns:minmax(0,5fr) minmax(0,6fr) } }
.pw__img{ background:var(--surface) } .pw__img img{ display:block; width:100%; height:100%; min-height:12rem; object-fit:cover }
.pw__in{ padding:1.3rem 1.4rem } .pw__in p{ margin:.5rem 0; color:var(--ink); line-height:1.55 } .pw__in p b{ color:var(--ink) }
.pw__top{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center }
.pw__st{ font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.25rem .65rem; border-radius:9999px }
.pw__st--given{ background:var(--surface); color:var(--muted) } .pw__st--open{ background:#FFE9A8; color:#6B4E00 }
.pw__when{ display:inline-flex; align-items:center; gap:.3rem; font-size:.85rem; color:var(--muted) }
.pw__name{ font-family:'Fredoka',sans-serif; font-size:1.6rem; margin:.4rem 0 .2rem; color:var(--ink) } .pw__name small{ font-size:1rem; color:var(--muted) }
.pw-mx{ display:flex; gap:.8rem; align-items:flex-start; margin-top:2.5rem; padding:1.2rem 1.3rem; border-radius:1.2rem; background:color-mix(in srgb, var(--accent) 8%, #fff); border:1px solid color-mix(in srgb, var(--accent) 25%, #fff) }
.pw-mx .ico{ flex:none; color:var(--accent) } .pw-mx b{ display:block; color:var(--ink) } .pw-mx span{ color:var(--muted) }
.pw-mascots{ margin-top:1.4rem; color:var(--muted); line-height:1.6 } .pw-mascots b{ color:var(--ink) }
/* banner interi: immagine sopra, a tutta larghezza */
@media (min-width:820px){ .pw{ grid-template-columns:1fr } }
.pw__img img{ height:auto; min-height:0; object-fit:contain; aspect-ratio:auto }
.pw__img{ border-bottom:2px solid var(--ink) }

/* ---------- messaggi privati */
.hmail{ position:relative; display:grid; place-items:center; width:2.4rem; height:2.4rem; margin-right:.35rem; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff }
.hmail:hover{ background:rgba(255,255,255,.16) }
@media (max-width:1100px){ .hmail{ display:none } }
.msg-page{ padding-top:7rem } @media (max-width:1023px){ .msg-page{ padding-top:5.5rem } }
.msg{ display:grid; grid-template-columns:1fr; min-height:34rem; background:#fff; border:2px solid var(--ink); border-radius:1.4rem; box-shadow:0 .35rem 0 var(--ink); overflow:hidden }
@media (min-width:900px){ .msg{ grid-template-columns:21rem 1fr; height:min(44rem, calc(100dvh - 11rem)) } }
.msg__side{ display:flex; flex-direction:column; border-right:2px solid var(--line); min-height:0 }
.msg__sh{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.1rem; border-bottom:2px solid var(--line) }
.msg__sh h2{ font-family:'Fredoka',sans-serif; margin:0; font-size:1.35rem }
.msg__new{ display:inline-flex; align-items:center; gap:.35rem; border:2px solid var(--ink); border-radius:9999px; background:var(--gold, #FFC83D); padding:.35rem .8rem; font:inherit; font-weight:800; font-size:.85rem; cursor:pointer }
.msg__list{ list-style:none; margin:0; padding:.4rem; overflow:auto; flex:1 }
.msg__c{ width:100%; display:flex; gap:.7rem; align-items:center; padding:.65rem .7rem; border:0; border-radius:.9rem; background:none; font:inherit; text-align:left; cursor:pointer; color:var(--ink) }
.msg__c:hover{ background:var(--surface) } .msg__c.is-on{ background:color-mix(in srgb, var(--accent) 10%, #fff) }
.msg__ct{ flex:1; min-width:0 } .msg__ct b{ display:block; font-size:.95rem } .msg__ct small{ display:block; color:var(--muted); font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.msg__c.is-new .msg__ct small{ color:var(--ink); font-weight:700 }
.msg__cm{ display:flex; flex-direction:column; align-items:flex-end; gap:.25rem } .msg__cm small{ font-size:.72rem; color:var(--subtle) }
.msg__cm i{ font-style:normal; min-width:1.3rem; height:1.3rem; padding:0 .35rem; border-radius:9999px; background:var(--accent); color:#fff; font-size:.72rem; font-weight:800; display:grid; place-items:center }
.msg__rule{ display:flex; gap:.4rem; align-items:flex-start; margin:0; padding:.8rem 1.1rem; font-size:.78rem; color:var(--muted); border-top:2px solid var(--line) } .msg__rule .ico{ flex:none; margin-top:.1rem }
.msg__pick{ border-bottom:2px solid var(--line); max-height:18rem; overflow:auto; padding:.4rem }
.msg__pickh{ display:flex; justify-content:space-between; align-items:center; padding:.3rem .5rem } .msg__pickh button{ border:0; background:none; cursor:pointer; color:var(--muted) }
.msg__pu{ width:100%; display:flex; gap:.6rem; align-items:center; padding:.5rem; border:0; background:none; border-radius:.8rem; cursor:pointer; font:inherit; text-align:left } .msg__pu:hover{ background:var(--surface) }
.msg__pu span{ display:flex; flex-direction:column; font-weight:700 } .msg__pu small{ font-weight:400; color:var(--muted) }
.msg__empty{ padding:1rem 1.1rem; color:var(--muted); margin:0 }
.msg__main{ display:flex; flex-direction:column; min-height:0; background:var(--surface) }
.msg__none{ margin:auto; display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:3rem 1.5rem; text-align:center; color:var(--muted) } .msg__none .ico{ color:var(--accent) }
.msg__none b{ color:var(--ink); font-size:1.1rem }
.msg__none--card{ background:#fff; border:2px solid var(--ink); border-radius:1.4rem; box-shadow:0 .35rem 0 var(--ink); max-width:30rem }
.msg__th{ display:flex; align-items:center; gap:.5rem; padding:.8rem 1rem; background:#fff; border-bottom:2px solid var(--line) }
.msg__back{ display:none; border:0; background:none; cursor:pointer; color:var(--ink) }
.msg__who{ display:flex; gap:.6rem; align-items:center; color:var(--ink); text-decoration:none } .msg__who span{ display:flex; flex-direction:column } .msg__who small{ color:var(--muted) }
.msg__body{ flex:1; overflow:auto; padding:1rem; display:flex; flex-direction:column; gap:.1rem; min-height:16rem }
.msg__day{ text-align:center; font-size:.75rem; color:var(--subtle); margin:.8rem 0 .4rem; font-weight:700 }
.msg__m{ max-width:78%; margin:.2rem 0; padding:.55rem .85rem; border-radius:1.1rem 1.1rem 1.1rem .3rem; background:#fff; border:1px solid var(--line); align-self:flex-start; width:fit-content }
.msg__body > div{ display:flex; flex-direction:column }
.msg__m.is-mine{ align-self:flex-end; border-radius:1.1rem 1.1rem .3rem 1.1rem; background:var(--accent); color:#fff; border-color:var(--accent) }
.msg__m p{ margin:0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.45 }
.msg__m small{ display:block; font-size:.68rem; opacity:.7; margin-top:.2rem }
.msg__rep{ border:0; background:none; font:inherit; font-size:.68rem; color:inherit; text-decoration:underline; margin-left:.5rem; cursor:pointer; opacity:.8 }
.msg__form{ display:grid; grid-template-columns:1fr auto; gap:.6rem; align-items:end; padding:.8rem 1rem; background:#fff; border-top:2px solid var(--line) }
.msg__form textarea{ resize:none; font:inherit; padding:.7rem .9rem; border:2px solid var(--line); border-radius:1rem; max-height:8rem } .msg__form textarea:focus{ outline:none; border-color:var(--accent) }
.msg__err{ grid-column:1 / -1; margin:0; color:#B42318; font-size:.88rem; font-weight:700 }
.msg__block{ display:flex; gap:.6rem; align-items:flex-start; margin:0; padding:1rem 1.1rem; background:#FFF4E5; border-top:2px solid #F5C77E; color:#6B4E00; font-size:.9rem; line-height:1.45 } .msg__block .ico{ flex:none; margin-top:.15rem }
@media (max-width:899px){
  .msg.has-thread .msg__side{ display:none } .msg:not(.has-thread) .msg__main{ display:none }
  .msg__back{ display:grid } .msg__main{ min-height:32rem } .msg__m{ max-width:88% }
}
.uact__dm{ display:flex; gap:.5rem; align-items:flex-start; flex-basis:100%; margin-top:.6rem; padding:.7rem .85rem; border-radius:.9rem; background:#FFF4E5; border:1px solid #F5C77E; color:#6B4E00; font-size:.88rem; line-height:1.45 }
.uact__dm .ico{ flex:none; margin-top:.15rem } .uact__dm button{ margin-left:auto; border:0; background:none; color:inherit; cursor:pointer }
.uact{ flex-wrap:wrap }

/* ---------- assistenza */
.sup{ display:grid; gap:1.4rem } @media (min-width:960px){ .sup{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:start } }
.sup__new, .sup__mine, .sup-t{ background:#fff; border:2px solid var(--ink); border-radius:1.4rem; box-shadow:0 .35rem 0 var(--ink); padding:1.4rem }
.sup h2, .sup-t h2{ font-family:'Fredoka',sans-serif; margin:0 0 .4rem; color:var(--ink) }
.sup__lead{ color:var(--muted); margin:0 0 1rem }
.sup__lab{ display:block; font-weight:800; font-size:.85rem; margin:1rem 0 .4rem; color:var(--ink) }
.sup__cats{ display:flex; flex-wrap:wrap; gap:.45rem }
.sup__cat{ border:2px solid var(--line); background:#fff; border-radius:9999px; padding:.45rem .85rem; font:inherit; font-size:.85rem; font-weight:700; cursor:pointer; color:var(--ink) }
.sup__cat.is-on{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, #fff); color:var(--accent) }
.sup__in{ width:100%; font:inherit; padding:.75rem .95rem; border:2px solid var(--line); border-radius:1rem; background:#fff; resize:vertical } .sup__in:focus{ outline:none; border-color:var(--accent) }
.sup__safe{ display:flex; gap:.4rem; align-items:center; font-size:.82rem; color:var(--muted); margin:.7rem 0 1rem }
.sup__list{ list-style:none; margin:.6rem 0 0; padding:0; display:grid; gap:.6rem }
.sup__list a{ display:block; padding:.8rem .9rem; border:1px solid var(--line); border-radius:1rem; color:var(--ink); text-decoration:none } .sup__list a:hover{ border-color:var(--accent) }
.sup__list b{ display:block; margin:.35rem 0 .1rem } .sup__list small{ color:var(--muted); font-size:.8rem }
.sup__st{ display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.2rem .6rem; border-radius:9999px; background:var(--surface); color:var(--muted) }
.sup__st.is-open{ background:#FFF1C2; color:#7A5500 } .sup__st.is-answered{ background:#DDF5EA; color:#0E6B4B } .sup__st.is-closed{ background:#ECEEF5; color:#5B6485 }
.sup-t{ max-width:52rem } .sup-t__h{ display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; margin:1rem 0 } .sup-t__h small{ color:var(--muted) }
.sup-t__list{ list-style:none; margin:0; padding:0; display:grid; gap:.8rem }
.sup-t__list li{ padding:.9rem 1rem; border-radius:1rem; background:var(--surface) } .sup-t__list li.is-staff{ background:color-mix(in srgb, var(--accent) 9%, #fff); border-left:4px solid var(--accent) }
.sup-t__who{ display:flex; justify-content:space-between; gap:1rem; font-size:.85rem } .sup-t__who small{ color:var(--muted) }
.sup-t__list p{ margin:.4rem 0 0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5 }
.sup-t__form{ margin-top:1.2rem; display:grid; gap:.7rem }

/* ---------- bacheca */
.wallp{ display:grid; gap:1.2rem }
.wallp__box{ background:#fff; border:2px solid var(--line); border-radius:1.3rem; padding:1.3rem 1.4rem }
.wallp__h{ font-family:'Fredoka',sans-serif; margin:0 0 .3rem; font-size:1.3rem; color:var(--ink) } .wallp__p{ color:var(--muted); margin:0 0 1rem }
.wallp__form{ display:grid; gap:.7rem }
.wallp__row{ display:flex; justify-content:space-between; align-items:center; gap:.8rem; flex-wrap:wrap } .wallp__row small{ color:var(--muted); font-size:.8rem } .wallp__row small.is-low{ color:#B45309 }
.wallp__prev{ position:relative; width:fit-content } .wallp__prev img{ display:block; max-width:min(100%,22rem); max-height:16rem; border-radius:1rem; border:2px solid var(--line) }
.wallp__prev button{ position:absolute; top:.4rem; right:.4rem; width:1.9rem; height:1.9rem; display:grid; place-items:center; border:0; border-radius:9999px; background:rgba(10,18,64,.75); color:#fff; cursor:pointer }
.wallp__rules{ display:flex; gap:.4rem; align-items:flex-start; font-size:.8rem; color:var(--muted); margin:0 } .wallp__rules .ico{ flex:none; margin-top:.15rem }
.wallp__done{ display:flex; gap:.5rem; align-items:center; padding:.9rem 1rem; border-radius:1rem; background:#DDF5EA; color:#0E6B4B; font-weight:700; margin:0 }
.wallp__list{ list-style:none; margin:0; padding:0; display:grid; gap:.8rem }
.wallp__list li{ padding:.9rem 1rem; border:1px solid var(--line); border-radius:1rem }
.wallp__top{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap } .wallp__top small{ color:var(--muted); font-size:.8rem } .wallp__del{ margin-left:auto }
.wallp__list p{ margin:.5rem 0 0; white-space:pre-wrap; overflow-wrap:anywhere } .wallp__list img{ display:block; max-width:min(100%,20rem); border-radius:.9rem; margin-top:.6rem }
.wallp__why{ display:flex; gap:.4rem; align-items:center; color:#B45309; font-size:.88rem }
.wall{ list-style:none; margin:0; padding:0; display:grid; gap:1rem }
.wall__p{ padding:1rem 1.1rem; border-radius:1.1rem; background:var(--surface) }
.wall__p p{ margin:0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.55; color:var(--ink) }
.wall__p img{ display:block; width:100%; max-height:28rem; object-fit:cover; border-radius:.9rem; margin-top:.7rem }
.wall__p small{ display:block; margin-top:.5rem; color:var(--subtle); font-size:.78rem }
.wall__own{ margin:0 0 1rem }
.wn-new{ display:inline-block; margin-left:.5rem; padding:.1rem .5rem; border-radius:9999px; background:#FFE9A8; color:#6B4E00; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase }

/* ---------- card: Super Poteri e cambio di account xat */
.csp{ display:flex; align-items:center; gap:.6rem; margin:.2rem 0 .8rem; padding:.65rem .9rem; border-radius:1rem; background:color-mix(in srgb, var(--accent) 9%, #fff); color:var(--ink); text-decoration:none; font-size:.9rem }
.csp .ico:first-child{ color:var(--accent) } .csp span{ flex:1 } .csp:hover{ background:color-mix(in srgb, var(--accent) 15%, #fff) }
.ctr__info{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin:1rem 0 }
.ctr__from, .ctr__to{ flex:1; min-width:12rem; padding:.9rem 1rem; border-radius:1rem; border:2px solid var(--line); display:flex; flex-direction:column; gap:.1rem }
.ctr__to{ border-style:dashed } .ctr__info small{ font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--subtle) }
.ctr__info b{ color:var(--ink); font-size:1.05rem } .ctr__info span{ color:var(--muted); font-size:.85rem }
.ctr__rules{ list-style:none; padding:0; margin:0 0 1.2rem; display:grid; gap:.45rem } .ctr__rules li{ display:flex; gap:.5rem; align-items:flex-start; color:var(--ink); font-size:.92rem } .ctr__rules .ico{ flex:none; margin-top:.2rem; color:var(--accent) }
.ctr__steps{ margin:0 0 .6rem; padding-left:1.3rem; display:grid; gap:.35rem; color:var(--ink) }
.ctr__steps code, .ctr__code{ font-family:ui-monospace,Menlo,monospace }
.ctr__code{ letter-spacing:.12em; text-transform:uppercase; max-width:16rem }
.ctr__form{ display:grid; gap:.3rem } .ctr__form .checkin{ margin-top:.8rem; justify-self:start }
.ctr__hist{ margin-top:1.4rem } .ctr__hist h3{ font-family:'Fredoka',sans-serif; margin:0 0 .5rem; font-size:1.1rem }
.ctr__hist ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem } .ctr__hist li{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; font-size:.9rem; color:var(--muted) } .ctr__hist b{ color:var(--ink) }

/* ---------- Super Poteri: badge */
.spboard__stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr)); gap:.6rem; margin-bottom:1rem }
.spboard__stats div{ padding:.7rem .9rem; border-radius:1rem; background:var(--surface) }
.spboard__stats b{ display:block; font-family:'Fredoka',sans-serif; font-size:1.45rem; color:var(--ink); line-height:1.1 } .spboard__stats em{ font-style:normal; font-size:.9rem; color:var(--subtle) }
.spboard__stats small{ color:var(--muted); font-size:.78rem }
.spboard__ab{ list-style:none; margin:0 0 1.2rem; padding:0; display:grid; gap:.45rem } @media (min-width:760px){ .spboard__ab{ grid-template-columns:1fr 1fr; column-gap:1.4rem } }
.spboard__ab li{ display:grid; grid-template-columns:7.5rem 1fr 2.2rem; gap:.6rem; align-items:center; font-size:.88rem; color:var(--ink) }
.spboard__ab i{ height:.5rem; border-radius:9999px; background:var(--line); overflow:hidden } .spboard__ab s{ display:block; height:100%; background:linear-gradient(90deg,var(--accent),#7C4DFF); border-radius:9999px }
.spboard__ab b{ text-align:right; font-size:.85rem }
.spboard__cat{ margin-top:1.1rem } .spboard__cat h3{ font-family:'Fredoka',sans-serif; font-size:1.1rem; margin:0 0 .6rem; color:var(--ink) } .spboard__cat h3 small{ color:var(--subtle); font-size:.8rem }
.spboard__grid{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)) }
.spb{ display:flex; gap:.75rem; align-items:flex-start; padding:.7rem; border:2px solid var(--line); border-radius:1rem; background:#fff }
.spb__img{ flex:none; width:3.6rem; height:3.6rem; border-radius:.8rem; overflow:hidden; background:#0B1150; border:2px solid var(--ink) } .spb__img img{ width:100%; height:100%; object-fit:cover; display:block }
.spb__in{ min-width:0; flex:1; display:flex; flex-direction:column; gap:.15rem }
.spb__n{ font-size:.92rem; color:var(--ink); line-height:1.2 } .spb__st{ display:flex; align-items:center; gap:.4rem; font-size:.75rem; font-weight:800; color:var(--muted) }
.spb__d{ font-size:.75rem; color:var(--muted); line-height:1.35 }
.spb__dots{ display:inline-flex; gap:.2rem } .spb__dots i{ width:.45rem; height:.45rem; border-radius:50%; background:var(--line) } .spb__dots i.on{ background:var(--accent) }
.spb--l1 .spb__img{ border-color:#B8773F } .spb--l2 .spb__img{ border-color:#9AA5B8 } .spb--l3 .spb__img{ border-color:#E0A800 } .spb--l4 .spb__img{ border-color:#5B7CFF; box-shadow:0 0 0 2px #BFD0FF }
.spb__bar{ position:relative; display:block; height:1rem; margin-top:.25rem; border-radius:9999px; background:var(--surface); overflow:hidden }
.spb__bar i{ position:absolute; inset:0 auto 0 0; background:color-mix(in srgb, var(--accent) 30%, #fff) } .spb__bar em{ position:relative; display:block; font-style:normal; font-size:.66rem; font-weight:800; color:var(--ink); padding-left:.45rem; line-height:1rem }
.spb.is-locked{ background:var(--surface) } .spb.is-locked .spb__img{ filter:grayscale(1); opacity:.45; border-color:var(--line) } .spb.is-locked .spb__n{ color:var(--muted) }
.spboard--unlocked .spboard__grid{ grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)) }
.spboard__foot{ margin-top:1rem; font-size:.85rem; color:var(--muted) }
@media (max-width:639px){
  .spboard__grid, .spboard--unlocked .spboard__grid{ grid-template-columns:1fr 1fr; gap:.5rem }
  .spb{ flex-direction:column; align-items:center; text-align:center; padding:.6rem .5rem } .spb__in{ align-items:center; width:100% }
  .spb__d{ display:none } .spb__st{ justify-content:center; flex-wrap:wrap } .spb__bar{ width:100% }
  .spboard__ab li{ grid-template-columns:6.5rem 1fr 2rem }
}

/* ---------- Super Poteri sul profilo pubblico */
.spx{ display:grid; gap:1.2rem }
.spx__hero{ display:grid; gap:1rem; padding:1.4rem; border-radius:1.4rem; color:#fff; background:radial-gradient(120% 140% at 0% 0%, #3B5BFF 0%, #1B2A9E 45%, #0B1150 100%); border:2px solid var(--ink); box-shadow:0 .35rem 0 var(--ink); position:relative; overflow:hidden }
.spx__hero::after{ content:''; position:absolute; right:-3rem; top:-3rem; width:12rem; height:12rem; border-radius:50%; background:radial-gradient(circle, rgba(255,200,61,.35), transparent 70%) }
@media (min-width:760px){ .spx__hero{ grid-template-columns:auto 1fr; align-items:center } .spx__lv{ grid-column:1 / -1 } }
.spx__rank{ display:grid; justify-items:center; align-content:center; min-width:9rem; padding:.8rem 1rem; border-radius:1.1rem; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2) }
.spx__rank .ico{ color:#FFC83D } .spx__rank b{ font-family:'Fredoka',sans-serif; font-size:2.6rem; line-height:1 } .spx__rank span{ font-size:.8rem; opacity:.85 }
.spx__nums{ display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center }
.spx__nums > div{ display:flex; flex-direction:column; position:relative } .spx__nums b{ font-family:'Fredoka',sans-serif; font-size:1.9rem; line-height:1.05 } .spx__nums em{ font-style:normal; font-size:1rem; opacity:.7 } .spx__nums span{ font-size:.8rem; opacity:.8 }
.spx__badges{ padding-left:5.2rem; min-height:4.75rem; justify-content:center } .spx__ringc{ position:absolute; left:0; top:50%; transform:translateY(-50%); width:4.75rem; height:4.75rem }
.spx__lv{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; position:relative; z-index:1 }
.spx__lv li{ display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .7rem; border-radius:9999px; background:rgba(255,255,255,.12); font-size:.8rem; font-weight:700 }
.spx__lv i{ width:.6rem; height:.6rem; border-radius:50% } .spx__lv--4 i{ background:#8FB0FF } .spx__lv--3 i{ background:#F2C94C } .spx__lv--2 i{ background:#C8D1E0 } .spx__lv--1 i{ background:#C98A55 }
.spx__body{ display:grid; gap:1.2rem } @media (min-width:900px){ .spx__body{ grid-template-columns:minmax(0,5fr) minmax(0,6fr) } }
.spx h3{ font-family:'Fredoka',sans-serif; font-size:1.15rem; margin:0 0 .6rem; color:var(--ink) } .spx h3 small{ color:var(--subtle); font-size:.8rem }
.spx__ab, .spx__top, .spx__all{ padding:1.1rem 1.2rem; border-radius:1.2rem; background:var(--surface) }
.spx__radar{ display:block; width:100%; max-width:22rem; margin:0 auto }
.spx__ring{ fill:none; stroke:var(--line); stroke-width:1 } .spx__axis{ stroke:var(--line); stroke-width:1 }
.spx__area{ fill:color-mix(in srgb, var(--accent) 28%, transparent); stroke:var(--accent); stroke-width:2; stroke-linejoin:round } .spx__dot{ fill:var(--accent) }
.spx__lbl{ font-size:9px; font-weight:700; fill:var(--muted) }
.spx__ab ul{ list-style:none; margin:.6rem 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.3rem .9rem }
.spx__ab li{ display:flex; justify-content:space-between; font-size:.82rem; color:var(--muted) } .spx__ab li b{ color:var(--ink) }
.spx__top ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem } @media (min-width:560px){ .spx__top ul{ grid-template-columns:repeat(4,1fr) } } @media (min-width:900px){ .spx__top ul{ grid-template-columns:repeat(2,1fr) } } @media (min-width:1200px){ .spx__top ul{ grid-template-columns:repeat(4,1fr) } }
.spx__tb{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.25rem; padding:.8rem .5rem; border-radius:1rem; background:#fff; border:2px solid var(--line) }
.spx__tb img{ width:4.6rem; height:4.6rem; border-radius:1rem; border:3px solid var(--line); background:#0B1150 }
.spx__tb b{ font-size:.85rem; line-height:1.2; color:var(--ink) } .spx__tb span{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted) }
.spx__tb--4{ border-color:#BFD0FF; background:linear-gradient(180deg,#F1F5FF,#fff) } .spx__tb--4 img{ border-color:#5B7CFF; box-shadow:0 0 0 3px #DCE5FF, 0 0 18px rgba(91,124,255,.45) } .spx__tb--4 span{ color:#3552D6 }
.spx__tb--3 img{ border-color:#E0A800; box-shadow:0 0 12px rgba(224,168,0,.35) } .spx__tb--3 span{ color:#9A6B00 }
.spx__tb--2 img{ border-color:#9AA5B8 } .spx__tb--1 img{ border-color:#B8773F }
.spx__all ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; grid-template-columns:repeat(auto-fill,minmax(5.2rem,1fr)) }
.spx__cb{ display:flex; flex-direction:column; align-items:center; gap:.3rem; text-align:center }
.spx__cb img{ width:3.5rem; height:3.5rem; border-radius:.85rem; border:2px solid var(--line); background:#0B1150 }
.spx__cb span{ font-size:.7rem; line-height:1.2; color:var(--muted) }
.spx__cb--4 img{ border-color:#5B7CFF } .spx__cb--3 img{ border-color:#E0A800 } .spx__cb--2 img{ border-color:#9AA5B8 } .spx__cb--1 img{ border-color:#B8773F }
.spx__more{ display:grid; place-items:center; width:3.5rem; height:3.5rem; border-radius:.85rem; border:2px dashed var(--line); font-family:'Fredoka',sans-serif; font-size:1.05rem !important; color:var(--muted) }
.spx__foot{ margin:0; font-size:.82rem; color:var(--muted) }
.spx-hidden{ display:flex; gap:.6rem; align-items:flex-start; padding:.8rem 1rem; border-radius:1rem; background:#FFF4E5; border:1px solid #F5C77E; color:#6B4E00; font-size:.9rem; margin-bottom:1rem } .spx-hidden .ico{ flex:none; margin-top:.15rem }
.sptoggle{ display:flex; gap:.8rem; align-items:center; padding:.8rem 1rem; margin-bottom:1rem; border-radius:1rem; background:color-mix(in srgb, var(--accent) 8%, #fff); border:1px solid color-mix(in srgb, var(--accent) 22%, #fff) }
.sptoggle b{ display:block; color:var(--ink) } .sptoggle small{ color:var(--muted) }
.sptoggle__sw{ position:relative; flex:none; width:3rem; height:1.7rem } .sptoggle__sw input{ position:absolute; opacity:0; inset:0; cursor:pointer; z-index:1 }
.sptoggle__sw span{ position:absolute; inset:0; border-radius:9999px; background:#C9D1E6; transition:background .15s }
.sptoggle__sw span::after{ content:''; position:absolute; top:.2rem; left:.2rem; width:1.3rem; height:1.3rem; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s }
.sptoggle__sw input:checked + span{ background:var(--accent) } .sptoggle__sw input:checked + span::after{ transform:translateX(1.3rem) }
.sptoggle__sw input:focus-visible + span{ outline:3px solid color-mix(in srgb, var(--accent) 40%, transparent) }
@media (max-width:639px){
  .spx__all ul{ grid-template-columns:repeat(4,1fr); gap:.5rem .3rem } .spx__cb img, .spx__more{ width:3rem; height:3rem } .spx__cb span{ font-size:.62rem }
  .spx__hero{ padding:1.1rem } .spx__rank{ min-width:0 } .spx__nums{ gap:1rem }
}