/* Sfida inviti (/invita): fondo, gradini, portafoglio, amici e classifica. Token di design-system.css. */
.it-site[data-page="invita"] > main.iv-page { width: 100%; max-width: none; margin: 0; padding: 0 0 var(--ds-space-8); background: var(--ds-ink-900); color: var(--ds-text); }
.it-site[data-page="invita"] > main.iv-page::before { content: none; }
.iv-body { display: grid; gap: var(--ds-space-6); padding-top: var(--ds-space-6); }
.iv-body h2 { margin: 0; font: 400 var(--ds-display-s)/1 var(--ds-font-display); letter-spacing: var(--ds-tracking-display); text-transform: uppercase; }
.iv-muted { margin: 0; color: var(--ds-text-2); font-size: var(--ds-text-sm); }
.iv-error { margin: 0; color: var(--ds-red); font-weight: 600; }

.iv-fund { display: grid; gap: var(--ds-space-2); padding: var(--ds-space-5); border: 1px solid var(--ds-lime-line); border-radius: var(--ds-r-2); background: linear-gradient(135deg, var(--ds-lime-soft), transparent 60%), var(--ds-ink-850); }
.iv-fund__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ds-space-2); }
.iv-fund__head .ds-label { margin: 0; }
.iv-fund__value { margin: 0; color: var(--ds-text-2); }
.iv-fund__value strong { color: var(--ds-lime); font: 400 var(--ds-display-m)/1 var(--ds-font-display); }
.iv-fund__bar { height: 18px; overflow: hidden; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-pill); background: var(--ds-ink-950); }
.iv-fund__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ds-success), var(--ds-lime)); transition: width .6s ease; }
.iv-fund--big .iv-fund__bar { height: 26px; }
.iv-fund__note { margin: 0; color: var(--ds-text-2); font-size: var(--ds-text-sm); }

.iv-login { align-items: flex-start; }
.iv-login h2 + p, .iv-login p { margin: 0; color: var(--ds-text-2); }

.iv-rules { gap: var(--ds-space-4); }
.iv-rules .ds-eyebrow { margin: 0; }
.iv-rules__list { display: grid; gap: var(--ds-space-2); margin: 0; padding-left: 1.3em; color: var(--ds-text-2); line-height: 1.5; }
.iv-rules__tick { display: flex; align-items: center; gap: var(--ds-space-3); min-height: var(--ds-tap); padding: var(--ds-space-3) var(--ds-space-4); border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-1); background: var(--ds-ink-800); font-weight: 700; cursor: pointer; }
.iv-rules__tick input { width: 22px; height: 22px; accent-color: var(--ds-lime); }
.iv-rules .ds-btn[disabled] { opacity: .45; cursor: not-allowed; }

.iv-held { padding: var(--ds-space-4); border: 1px solid var(--ds-warning); border-radius: var(--ds-r-2); background: rgba(244, 202, 100, .1); color: var(--ds-text); }
.iv-wallet { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--ds-space-4); }
.iv-wallet .ds-label { margin: 0; }
.iv-wallet__balance { margin: 0; color: var(--ds-lime); font: 400 var(--ds-display-l)/1 var(--ds-font-display); }
.iv-wallet__money .ds-chip { align-self: flex-start; }
.iv-link { display: block; overflow-wrap: anywhere; padding: var(--ds-space-3); border: 1px dashed var(--ds-lime-line); border-radius: var(--ds-r-1); background: var(--ds-ink-950); color: var(--ds-lime); font: 600 var(--ds-text-md)/1.3 var(--ds-font-mono); }
.iv-link__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }

.iv-sleepy { border-color: var(--ds-warning); }
.iv-sleepy .ds-eyebrow { margin: 0; color: var(--ds-warning); }
.iv-sleepy p:last-child { margin: 0; color: var(--ds-text-2); }

.iv-steps, .iv-friends, .iv-moves, .iv-board { display: grid; gap: var(--ds-space-4); }
.iv-steps__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--ds-space-3); margin: 0; padding: 0; list-style: none; }
.iv-steps__n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--ds-r-pill); background: var(--ds-lime-soft); color: var(--ds-lime); font-weight: 700; }
.iv-steps__eur { margin-top: auto; color: var(--ds-lime); font: 400 var(--ds-display-s)/1 var(--ds-font-display); }
.iv-bonus { display: grid; gap: var(--ds-space-2); padding: var(--ds-space-4); border-left: 3px solid var(--ds-lime); background: var(--ds-ink-850); color: var(--ds-text-2); }
.iv-bonus p { margin: 0; }
.iv-bonus strong { color: var(--ds-text); }

.iv-friends__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--ds-space-3); margin: 0; padding: 0; list-style: none; }
.iv-friend { display: grid; gap: var(--ds-space-2); padding: var(--ds-space-4); border: 1px solid var(--ds-line); border-radius: var(--ds-r-2); background: var(--ds-ink-850); }
.iv-friend--off { opacity: .6; }
.iv-friend__head { display: flex; justify-content: space-between; gap: var(--ds-space-2); }
.iv-friend__head strong { color: var(--ds-lime); }
.iv-friend__name { margin: 0; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.iv-friend__note { margin: 0; color: var(--ds-text-2); font-size: var(--ds-text-sm); }
.iv-friend__steps { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--ds-text-sm); }
.iv-friend__steps li { display: flex; justify-content: space-between; gap: var(--ds-space-2); padding: 6px 10px; border-radius: var(--ds-r-1); background: var(--ds-ink-800); color: var(--ds-text-2); }
.iv-friend__steps li::before { content: "○"; margin-right: 6px; color: var(--ds-text-3); }
.iv-friend__steps li.is-done { background: var(--ds-lime-soft); color: var(--ds-text); }
.iv-friend__steps li.is-done::before { content: "✓"; color: var(--ds-lime); }
.iv-friend__steps span { flex: 1; }
.iv-friend__steps em { font-style: normal; font-variant-numeric: tabular-nums; }

.iv-move { color: var(--ds-lime); }
.iv-move--out { color: var(--ds-red); }
.iv-board__rank { min-width: 2ch; color: var(--ds-text-2); }
.iv-board__list > li:nth-child(-n+3) .iv-board__rank { color: var(--ds-tier-gold); }
.iv-board__avatar { flex: none; width: 36px; height: 36px; border-radius: var(--ds-r-pill); background: var(--ds-ink-700); object-fit: cover; }
.iv-board__score { margin-left: auto; color: var(--ds-lime); }
.iv-board__score span { color: var(--ds-text-2); font-size: var(--ds-text-xs); font-weight: 500; }
.iv-board__me { box-shadow: inset 3px 0 0 var(--ds-lime); }
.iv-board__list .ds-row { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.iv-moves .ds-row { grid-template-columns: minmax(0, 1fr) auto; }