/* Tema SEMPRE scuro: fisso, non dipende dal tema di Telegram (chiaro/scuro/host).
   Niente var(--tg-theme-*) qui dentro apposta — vogliamo lo stesso identico
   sfondo scuro su ogni device e su ogni ambiente (locale === server). */
:root {
  --tg-bg: #101014;
  --tg-sec: #0a0a0d;
  --tg-text: #f5f5f7;
  --tg-hint: #9a9aa4;
  --tg-link: #5ea1ff;
  --tg-btn: #2481cc;
  --tg-btn-text: #ffffff;
  --tg-destructive: #ff453a;
  --radius: 16px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html { color-scheme: dark; }

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--tg-sec);
  color: var(--tg-text);
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: 10px 12px 104px;
}

.top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  min-height: 40px;
}
.brand-wrap { flex: 1; min-width: 0; }
.brand {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tg-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.page-title {
  font-size: 12px;
  color: var(--tg-hint);
  line-height: 1.2;
}
.pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--tg-bg);
  border: none;
  color: var(--tg-text);
  border-radius: 999px;
  padding: 5px 10px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  height: 30px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.pill:active { transform: scale(.96); opacity: .92; }
.pill-ico { width: 16px; height: 16px; display: block; }
#points-val { font-variant-numeric: tabular-nums; }
.ghost {
  flex: 0 0 auto;
  background: var(--tg-bg);
  border: none;
  color: var(--tg-link);
  width: 34px;
  height: 34px;
  border-radius: 10px;
  padding: 0;
  font-size: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.view { animation: in .22s ease; }
@keyframes in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.hero {
  padding: 8px 4px 12px;
}
.hero h1 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 760;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.hero p {
  margin: 0;
  color: var(--tg-hint);
  font-size: 14px;
  line-height: 1.35;
}

.section-label {
  margin: 14px 4px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tg-hint);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tg-list {
  background: var(--tg-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.tg-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: var(--tg-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-bottom: 0.5px solid rgba(127,127,127,.22);
}
.tg-row:last-child { border-bottom: 0; }
.tg-row:active { background: rgba(127,127,127,.12); }
.tg-row-ico {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}
.tg-row-body { flex: 1; min-width: 0; }
.tg-row-body strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
}
.tg-row-body small {
  display: block;
  margin-top: 1px;
  color: var(--tg-hint);
  font-size: 13px;
}
.tg-chev {
  color: var(--tg-hint);
  font-size: 18px;
  opacity: .55;
}

.mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mega-tile {
  appearance: none;
  border: 0;
  border-radius: 20px;
  background: var(--tg-bg);
  color: var(--tg-text);
  padding: 22px 12px 16px;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  cursor: pointer;
  font: inherit;
  text-align: center;
}
.mega-tile:active { transform: scale(.98); }
/* Solo l'icona diretta della tile, mai le stelline inline dentro span/strong. */
.mega-tile > img {
  width: 56px;
  height: 56px;
  display: block;
  animation: floaty 2.4s ease-in-out infinite;
}
.mega-tile:nth-child(2) > img { animation-delay: .2s; }
.mega-tile:nth-child(3) > img { animation-delay: .35s; }
.mega-tile:nth-child(4) > img { animation-delay: .5s; }
.mega-tile:nth-child(5) > img { animation-delay: .65s; }
.mega-tile:nth-child(6) > img { animation-delay: .8s; }
.mega-tile strong {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
.mega-tile span {
  font-size: 12px;
  color: var(--tg-hint);
  line-height: 1.2;
}
.mega-tile.wide {
  grid-column: 1 / -1;
  min-height: 110px;
  flex-direction: row;
  justify-content: flex-start;
  padding: 18px 18px;
  gap: 14px;
  text-align: left;
}
.mega-tile.wide .mega-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.urgency {
  margin: 10px 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--tg-bg);
  color: var(--tg-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  display: flex;
  gap: 10px;
  align-items: center;
}
.urgency > img { width: 28px; height: 28px; flex: 0 0 auto; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 8px 0 12px;
}
.stat {
  background: var(--tg-bg);
  border-radius: 14px;
  padding: 12px 8px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.stat b { display: block; font-size: 20px; font-weight: 760; }
.stat small { color: var(--tg-hint); font-size: 11px; }

.progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(127,127,127,.18);
  overflow: hidden;
}
.progress > i {
  display: block;
  height: 100%;
  background: var(--tg-btn);
  width: 0;
  transition: width .45s ease;
}

.link-box {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--tg-bg);
  word-break: break-all;
  font-size: 13px;
  color: var(--tg-link);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.grid { display: grid; gap: 10px; }

.btn {
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 14px 16px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  color: var(--tg-btn-text);
  background: var(--tg-btn);
  width: 100%;
}
/* Stesso feedback al tocco della .pill: prima i bottoni pieni facevano solo un
   cambio di opacità, quasi invisibile su fondo scuro. */
.btn:active { opacity: .92; transform: scale(.98); }
.btn { transition: transform .12s ease, opacity .12s ease; }
.btn:disabled { opacity: .5; transform: none; cursor: default; }
.btn.ghost-btn {
  background: var(--tg-bg);
  color: var(--tg-link);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.btn.danger {
  background: var(--tg-destructive);
  color: #fff;
}
.btn.primary { background: var(--tg-btn); color: var(--tg-btn-text); }

.game-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 16px;
  background: var(--tg-bg);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.game-card h3 { margin: 0 0 4px; font-size: 17px; }
.game-card p { margin: 0 0 12px; color: var(--tg-hint); font-size: 13px; }
.game-card .cost {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 12px;
  font-weight: 800;
  color: var(--tg-link);
}
.deal-price {
  font-size: 20px;
  margin: 0 0 12px !important;
  color: var(--tg-text) !important;
}
.deal-price s {
  color: var(--tg-hint);
  font-size: 14px;
  margin-right: 8px;
}

.tabs {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(520px, 100%);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--tg-bg);
  border-top: 0.5px solid rgba(127,127,127,.25);
  z-index: 40;
}
.tab {
  position: relative;
  border: 0;
  background: transparent;
  color: var(--tg-hint);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  padding: 6px 2px 4px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1.05;
  /* 44pt di area toccabile anche con l'etichetta piccola (HIG) */
  min-height: 44px;
  cursor: pointer;
}
.tab span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tab-ico {
  width: 26px;
  height: 26px;
  display: block;
}
.tab.active { color: var(--tg-btn); }
/* Barretta sopra la tab attiva: prima l'unico segnale era il colore del testo
   a 10px, illeggibile con luce forte. */
.tab.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--tg-btn);
}
.tab:active { opacity: .7; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  background: rgba(40,40,40,.92);
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  z-index: 50;
  max-width: 90%;
  font-size: 14px;
  /* entra da sotto invece di apparire di colpo */
  transform: translate(-50%, 10px);
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: grid;
  place-items: center;
  z-index: 80;
  padding: 20px;
}
.modal[hidden] { display: none !important; }
.modal-card {
  width: min(400px, 100%);
  background: var(--tg-bg);
  border-radius: 18px;
  padding: 18px;
  animation: pop .22s ease;
  color: var(--tg-text);
}
@keyframes pop {
  from { transform: scale(.94); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.modal-msg { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.code-box { display: grid; gap: 8px; }
.code-box code {
  display: block;
  padding: 12px;
  border-radius: 10px;
  background: var(--tg-sec);
  letter-spacing: .04em;
  word-break: break-all;
}
.modal-hint { margin-top: 10px; color: var(--tg-hint); font-size: 12px; text-align: center; }
#btn-redeem-close { margin-top: 12px; }

/* Telegram-style top sheet for punti info */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}
.sheet:not([hidden]) { pointer-events: auto; }
.sheet[hidden] { display: none !important; }
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  transition: opacity .28s ease;
}
.sheet.open .sheet-backdrop { opacity: 1; }
.sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  max-height: min(78vh, 520px);
  background: var(--tg-bg);
  color: var(--tg-text);
  border-radius: 0 0 22px 22px;
  padding: 10px 18px calc(16px + env(safe-area-inset-top, 0px));
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
  transform: translateY(-108%);
  transition: transform .38s cubic-bezier(.22, 1, .36, 1);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
}
.sheet.open .sheet-panel { transform: translateY(0); }
.sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 99px;
  background: rgba(127, 127, 127, .35);
  margin: 2px auto 6px;
}
.sheet-hero {
  text-align: center;
  padding: 4px 0 8px;
}
.sheet-coin {
  display: block;
  margin: 0 auto 8px;
  filter: drop-shadow(0 4px 10px rgba(255, 200, 0, .35));
  animation: sheet-coin-in .5s cubic-bezier(.22, 1, .36, 1) both;
}
.sheet.open .sheet-coin { animation: sheet-coin-bounce .7s ease both; }
@keyframes sheet-coin-in {
  from { transform: scale(.4) rotate(-20deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes sheet-coin-bounce {
  0% { transform: scale(.4) rotate(-18deg); opacity: 0; }
  55% { transform: scale(1.12) rotate(4deg); opacity: 1; }
  100% { transform: none; }
}
.sheet-hero h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.sheet-warn {
  margin: 0;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--tg-destructive, #e53935);
  background: color-mix(in srgb, var(--tg-destructive, #e53935) 12%, transparent);
  padding: 4px 10px;
  border-radius: 8px;
}
.sheet-body { display: grid; gap: 10px; }
.sheet-block {
  background: var(--tg-sec);
  border-radius: 14px;
  padding: 12px 14px;
  opacity: 0;
  transform: translateY(-8px);
}
.sheet.open .sheet-block {
  animation: sheet-block-in .4s ease forwards;
}
.sheet.open .sheet-block:nth-child(1) { animation-delay: .08s; }
.sheet.open .sheet-block:nth-child(2) { animation-delay: .14s; }
.sheet.open .sheet-block:nth-child(3) { animation-delay: .2s; }
@keyframes sheet-block-in {
  to { opacity: 1; transform: none; }
}
.sheet-block strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}
.sheet-block p {
  margin: 0;
  font-size: 13px;
  color: var(--tg-hint);
  line-height: 1.4;
}
.sheet-actions {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  padding-bottom: 4px;
}

.pay-row {
  display: grid;
  gap: 8px;
}
.btn.stars-btn {
  background: linear-gradient(135deg, #ffc107, #ff9800);
  color: #1a1a1a;
}
.price-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--tg-hint);
}
.price-line b { color: var(--tg-text); font-size: 15px; }
.price-line .stars-price,
.deal-price .stars-price { color: #e6a100; font-weight: 800; }

.admin-grid { display: grid; gap: 10px; }
.admin-card {
  padding: 12px;
  border-radius: 14px;
  background: var(--tg-bg);
}
.admin-card h4 { margin: 0 0 8px; }
input, textarea, select {
  width: 100%;
  border-radius: 10px;
  border: 0.5px solid rgba(127,127,127,.3);
  background: var(--tg-sec);
  color: var(--tg-text);
  padding: 10px;
  font: inherit;
  margin-bottom: 8px;
}
.list-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 0.5px solid rgba(127,127,127,.2);
  font-size: 13px;
}
.muted { color: var(--tg-hint); }
.ok { color: #34c759; }
.bad { color: var(--tg-destructive); }

.qr-wrap {
  display: grid;
  place-items: center;
  margin: 14px 0;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
}
.qr-img {
  width: 280px;
  height: 280px;
  max-width: 100%;
  display: block;
}
.btc-timer {
  font-size: 28px;
  font-weight: 800;
  color: var(--tg-btn);
  margin: 4px 0 10px;
}
.btc-amount {
  text-align: center;
  font-size: 18px;
  margin: 8px 0;
}

.amz-card {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  margin: 0 0 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  object-fit: cover;
  aspect-ratio: 16 / 10;
  background: #111;
}
.amz-hero {
  margin: 0 0 12px;
}
.amz-hero img {
  width: 100%;
  border-radius: 16px;
  display: block;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
.amz-banner {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--tg-bg);
  border-radius: 16px;
  padding: 10px;
  margin: 0 0 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.amz-banner img {
  width: 96px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  flex: 0 0 auto;
}
.amz-banner strong {
  display: block;
  font-size: 15px;
}
.amz-banner span {
  display: block;
  color: var(--tg-hint);
  font-size: 12px;
  margin-top: 2px;
}
.amz-thumb {
  width: 72px !important;
  height: 48px !important;
  object-fit: cover;
  border-radius: 10px;
  animation: none !important;
}
.mega-tile.wide .amz-thumb {
  width: 88px !important;
  height: 58px !important;
}
.amz-reward .cost { z-index: 2; }

/* ==========================================================
   PREMI
   Riepilogo in alto (dove sei, quanto manca) e sotto le soglie
   due per riga: pronta, chiusa o già presa si leggono a colpo d'occhio.
   ========================================================== */
.rw-summary { margin-bottom: 4px; }
.rw-sum-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.rw-sum-count b {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}
.rw-sum-count span {
  margin-left: 6px;
  font-size: 13px;
  color: var(--tg-hint);
}
.rw-sum-flag {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.rw-sum-flag.ready {
  color: #101014;
  background: linear-gradient(135deg, #ffd60a, #ff9f0a);
}
.rw-sum-flag.wait {
  color: var(--tg-hint);
  background: rgba(127,127,127,.16);
}
.rw-sum-bot {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--tg-hint);
}
.rw-sum-bot b { color: var(--tg-text); }
.rw-sum-cta { margin-top: 12px; }
.rw-warn {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(255,159,10,.12);
  box-shadow: inset 0 0 0 1px rgba(255,159,10,.28);
  font-size: 12px;
  line-height: 1.35;
  color: #ffd60a;
}

.rw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.rw-card {
  appearance: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  color: var(--tg-text);
  background: var(--tg-bg);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .25s ease;
}
.rw-card:active { transform: scale(.975); }
.rw-card[disabled] { cursor: default; }

.rw-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0c0c10;
}
/* Le foto dei buoni hanno un fondo studio grigio chiaro che su tema scuro
   stona: si ingrandisce fino a far uscire dal riquadro solo la carta nera. */
.rw-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.7);
  transition: filter .3s ease, transform .3s ease;
}
.rw-card:active .rw-media img { transform: scale(1.62); }
.rw-flag {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rw-flag.ready {
  color: #101014;
  background: linear-gradient(135deg, #ffd60a, #ff9f0a);
  box-shadow: 0 2px 10px rgba(255,159,10,.45);
}
.rw-flag.lock {
  color: var(--tg-text);
  background: rgba(10,10,13,.72);
  backdrop-filter: blur(4px);
}
.rw-flag.done {
  color: #0b3d1e;
  background: #30d158;
}

.rw-info {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 12px 12px;
}
.rw-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.rw-amount {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
}
.rw-req {
  font-size: 11px;
  font-weight: 600;
  color: var(--tg-hint);
  white-space: nowrap;
}
.progress.rw-bar { height: 5px; }
.rw-state {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

/* pronta: bordo caldo e battito lento, si vede subito nella griglia */
.rw-card.is-ready {
  box-shadow: 0 0 0 1.5px rgba(255,214,10,.55), 0 6px 20px rgba(255,159,10,.16);
  animation: rwReady 2.4s ease-in-out infinite;
}
.rw-card.is-ready .rw-state { color: #ffd60a; }
.rw-card.is-ready .progress.rw-bar > i { background: linear-gradient(90deg, #ffd60a, #ff9f0a); }
@keyframes rwReady {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(255,214,10,.45), 0 6px 18px rgba(255,159,10,.12); }
  50% { box-shadow: 0 0 0 1.5px rgba(255,214,10,.85), 0 8px 26px rgba(255,159,10,.28); }
}

/* chiusa: art smorzata, ma testo e importo restano pienamente leggibili
   e la card resta un tasto utile verso gli inviti */
.rw-card.is-locked .rw-media img { filter: grayscale(.7) brightness(.78); }
.rw-card.is-locked .rw-amount { color: var(--tg-hint); }
.rw-card.is-locked .rw-state { color: var(--tg-hint); }

/* già presa: fuori dai giochi, niente da toccare */
.rw-card.is-done .rw-media img { filter: grayscale(1) brightness(.7); }
.rw-card.is-done .rw-amount { color: var(--tg-hint); }
.rw-card.is-done .rw-state { color: #30d158; }
.rw-card.is-done .progress.rw-bar > i { background: #30d158; }

.rw-foot {
  margin: 14px 2px 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--tg-hint);
}

@media (prefers-reduced-motion: reduce) {
  .rw-card.is-ready { animation: none; }
}

.card-soft {
  background: var(--tg-bg);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  margin-bottom: 12px;
}
.home-progress .hp-top,
.home-progress .hp-bot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.home-progress .hp-top { margin-bottom: 8px; color: var(--tg-hint); }
.home-progress .hp-bot { margin-top: 8px; color: var(--tg-text); }
.progress.fat { height: 14px; }
.progress.fat > i {
  background: linear-gradient(90deg, #ff9500, #ff3b30, #af52de);
  animation: barGlow 1.6s ease-in-out infinite;
}
@keyframes barGlow {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}
.hook-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.hook-pill {
  background: var(--tg-bg);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.hook-pill.hot {
  background: #ff3b30;
  color: #fff;
  animation: pulse 1.2s ease-in-out infinite;
}
.live-ticker {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(52,199,89,.12);
  color: var(--tg-text);
  font-size: 13px;
  font-weight: 650;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.live-ticker.tick-in { animation: tickIn .35s ease; }
/* Nome censurato: solo prima e ultima lettera, il resto mascherato dal server. */
.tk-name {
  font-weight: 800;
  letter-spacing: .02em;
}
.tk-hit { font-weight: 900; }
.tk-ago {
  font-style: normal;
  font-weight: 600;
  font-size: 11px;
  color: var(--tg-hint);
  margin-left: 2px;
}
.tk-win .tk-hit { color: #ffd60a; }
.tk-invite .tk-hit { color: #5ea1ff; }
.tk-coins .tk-hit { color: #ffd60a; }
.tk-prize .tk-hit { color: #34c759; }
.tk-amazon .tk-hit { color: #ff9f0a; }
.tk-streak .tk-hit { color: #ff6b3d; }
.live-ticker .inline-coin { vertical-align: -2px; }
@keyframes tickIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.pulse-border {
  box-shadow: 0 0 0 0 rgba(255,59,48,.45);
  animation: pborder 1.4s ease-out infinite;
}
@keyframes pborder {
  0% { box-shadow: 0 0 0 0 rgba(255,59,48,.4); }
  70% { box-shadow: 0 0 0 12px rgba(255,59,48,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); }
}
.game-card.locked { opacity: .72; }
.game-card.playable { outline: 1px solid rgba(52,199,89,.25); }

/* Arcade lobby */
.arcade-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 12px;
}
.arcade-hero h1 { margin: 0 0 2px; font-size: 24px; letter-spacing: -.02em; }
.arcade-hero p { margin: 0; color: var(--tg-hint); font-size: 13px; }
.arcade-mascot {
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));
  animation: arcade-bob 2.4s ease-in-out infinite;
}
@keyframes arcade-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-6px) rotate(3deg); }
}
.arcade-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.arcade-card {
  appearance: none;
  border: 0;
  text-align: left;
  font: inherit;
  color: var(--tg-text);
  background: var(--tg-bg);
  border-radius: 18px;
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  min-height: 168px;
  -webkit-tap-highlight-color: transparent;
}
.arcade-card:active { transform: scale(.98); }
.arcade-card.playable {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(52,199,89,.14), transparent 55%),
    var(--tg-bg);
}
.arcade-card.is-hot {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,149,0,.18), transparent 50%),
    radial-gradient(100% 80% at 100% 100%, rgba(255,59,48,.1), transparent 45%),
    var(--tg-bg);
}
.arcade-card.locked { opacity: .7; }
.arcade-card strong { font-size: 15px; line-height: 1.2; }
.arcade-tag {
  font-size: 11px;
  color: var(--tg-hint);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.arcade-cost {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 800;
  color: var(--tg-text);
  line-height: 1;
}
.arcade-play {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  color: var(--tg-link);
  letter-spacing: .02em;
}
.cost-coin {
  display: block;
  flex: 0 0 auto;
}
.play-cost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 800;
  margin: 2px 0 8px;
  color: var(--tg-text);
}
.hot-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #fff;
  background: linear-gradient(135deg, #ff9500, #ff3b30);
  padding: 3px 7px;
  border-radius: 999px;
  animation: hotpulse 1.2s ease-in-out infinite;
}
@keyframes hotpulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* Stella animata inline al posto della parola "pt"/"punti" ovunque nel testo. */
.inline-coin {
  display: inline-block;
  vertical-align: -3px;
  margin: 0 1px;
}

.play-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.play-hero h1 { margin: 0 0 2px; font-size: 22px; }
.play-hero p { margin: 0; color: var(--tg-hint); font-size: 13px; }
.play-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.play-cta img { display: block; }

/* ==========================================================
   Giochi emoji Telegram: 🎰 slot · 🎲 dado · 🎯 freccette · 🏀 canestro · ⚽ rigore
   Ogni arena è una scena a sé: si ferma sempre sul valore deciso dal server.
   ========================================================== */

.arena {
  position: relative;
  border-radius: 20px;
  margin: 8px 0 12px;
  overflow: hidden;
  background: var(--tg-sec);
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  /* il trascinamento è il comando di lancio: la pagina non deve scrollare */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.arena.aiming { cursor: grabbing; }
.arena-slot { cursor: default; }
.arena-slot {
  background:
    radial-gradient(circle at 50% 15%, rgba(255,214,10,.22), transparent 55%),
    linear-gradient(165deg, #17082e 0%, #2b1055 55%, #17082e 100%);
}
.arena-dice {
  background:
    radial-gradient(circle at 30% 25%, rgba(52,199,89,.22), transparent 52%),
    linear-gradient(160deg, #08301f, #14532d 60%, #166534);
}
.arena-darts {
  background:
    radial-gradient(circle at 50% 30%, rgba(230,57,70,.22), transparent 52%),
    linear-gradient(160deg, #14110f, #292524 55%, #44403c);
}
.arena-basket {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,149,0,.28), transparent 52%),
    linear-gradient(180deg, #5c1f0c, #a8390b 45%, #ea580c);
}
.arena-goal {
  background:
    radial-gradient(circle at 50% 100%, rgba(34,197,94,.3), transparent 58%),
    linear-gradient(180deg, #0d3d21, #166534 50%, #1f9d4f);
}
.arena .big-emoji { font-size: 76px; line-height: 1; }

.arena.is-win::after,
.arena.is-jackpot::after,
.arena.is-near::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  z-index: 4;
}
.arena.is-win::after {
  box-shadow: inset 0 0 0 2px rgba(52,199,89,.85), inset 0 0 34px rgba(52,199,89,.22);
  animation: arena-glow .9s ease;
}
.arena.is-jackpot::after {
  box-shadow: inset 0 0 0 3px rgba(255,214,10,.95), inset 0 0 46px rgba(255,214,10,.4);
  animation: arena-glow .6s ease 2;
}
.arena.is-near::after { box-shadow: inset 0 0 0 2px rgba(255,159,10,.75); }
@keyframes arena-glow {
  0% { opacity: .2; }
  40% { opacity: 1; }
  100% { opacity: .85; }
}

.fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 6;
}
.fx-points {
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translateX(-50%);
  font-size: 34px;
  font-weight: 900;
  color: #ffd60a;
  text-shadow: 0 3px 14px rgba(0,0,0,.55);
  letter-spacing: -.02em;
}
.fx-points.big { font-size: 46px; }
.fx-bit {
  position: absolute;
  top: 28%;
  width: 8px;
  height: 13px;
  border-radius: 2px;
}

/* ---------- 🎰 Slot ---------- */
.slot-cab {
  width: 268px;
  padding: 12px;
  border-radius: 20px;
  background: linear-gradient(180deg, #3a1370, #24094a 55%, #3a1370);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.45);
}
.slot-marquee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #ffd60a;
  text-shadow: 0 0 12px rgba(255,214,10,.65);
}
.slot-marquee b { font-size: 13px; letter-spacing: 0; }
.slot-window {
  position: relative;
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 8px;
  border-radius: 14px;
  background: #110721;
  box-shadow: inset 0 6px 16px rgba(0,0,0,.65);
  transition: box-shadow .25s ease;
}
.slot-reel {
  position: relative;
  width: 74px;
  height: 74px;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(180deg, #fffdf7, #ece5d5);
}
.slot-reel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.4), transparent 30%, transparent 70%, rgba(0,0,0,.4));
}
.reel-strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.reel-strip.blur { filter: blur(2.5px); }
.reel-cell {
  flex: 0 0 74px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  line-height: 1;
}
.reel-cell.sym-bar {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .06em;
  color: #2b1055;
}
.payline {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(90deg, transparent, #ff453a, transparent);
  opacity: .3;
}
.slot-window.spinning .payline { opacity: .12; }
.slot-window.win { box-shadow: inset 0 0 0 2px #34c759, inset 0 6px 16px rgba(0,0,0,.55); }
.slot-window.win .payline { opacity: 1; animation: payflash .45s ease-in-out 3; }
.slot-window.jackpot {
  box-shadow: inset 0 0 0 3px #ffd60a, 0 0 30px rgba(255,214,10,.6);
}
.slot-window.jackpot .reel-cell { animation: jackpop .45s ease 2; }
.slot-window.near { box-shadow: inset 0 0 0 2px #ff9f0a, inset 0 6px 16px rgba(0,0,0,.55); }
@keyframes payflash { 50% { opacity: .2; } }
@keyframes jackpop { 50% { transform: scale(1.12); } }
.slot-base {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 11px;
}
.slot-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff453a;
  box-shadow: 0 0 9px currentColor;
  animation: led 1.1s ease-in-out infinite;
}
.slot-led:nth-child(2) { background: #ffd60a; animation-delay: .16s; }
.slot-led:nth-child(3) { background: #34c759; animation-delay: .32s; }
@keyframes led { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* ---------- 🎲 Dado ---------- */
.arena-dice { perspective: 720px; }
.dice-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62px;
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.38));
}
.dice-shadow {
  position: absolute;
  bottom: 48px;
  left: 50%;
  width: 88px;
  height: 16px;
  margin-left: -44px;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  filter: blur(7px);
}
.dice-stage {
  position: relative;
  width: 88px;
  height: 88px;
  margin-bottom: 26px;
  transform-style: preserve-3d;
}
.cube {
  position: relative;
  width: 88px;
  height: 88px;
  transform-style: preserve-3d;
  will-change: transform;
}
.face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #fffdf8, #e4dfd3);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  backface-visibility: hidden;
}
.f1 { transform: translateZ(44px); }
.f2 { transform: rotateY(90deg) translateZ(44px); }
.f3 { transform: rotateX(90deg) translateZ(44px); }
.f4 { transform: rotateX(-90deg) translateZ(44px); }
.f5 { transform: rotateY(-90deg) translateZ(44px); }
.f6 { transform: rotateY(180deg) translateZ(44px); }
.pips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 64px;
  height: 64px;
}
.pip {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #1c1c1e;
  justify-self: center;
  align-self: center;
  box-shadow: inset 0 -2px 3px rgba(255,255,255,.28);
}
.pip.off { background: transparent; box-shadow: none; }

/* ---------- 🎯 Freccette ---------- */
.board-wrap {
  position: relative;
  width: 212px;
  height: 212px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.board {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    #e63946 0 6%, #2a9d8f 6% 12%, #f1e5c8 12% 28%, #1d1d20 28% 44%,
    #f1e5c8 44% 60%, #1d1d20 60% 76%, #e63946 76% 83%, #2a9d8f 83% 90%, #17171a 90% 100%);
  box-shadow: 0 12px 28px rgba(0,0,0,.45), inset 0 0 0 4px rgba(0,0,0,.4);
}
.board-sectors {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(0,0,0,.3) 0deg 18deg, rgba(0,0,0,0) 18deg 36deg);
  opacity: .55;
}
.holes { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.hole {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  box-shadow: 0 0 0 1px rgba(255,255,255,.3);
}
.burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  border: 3px solid #ffd60a;
  opacity: 0;
}
.burst.on { opacity: 1; }
/* Ancora a dimensione zero al centro del bersaglio: la freccia si muove in px puri. */
.dart-holder { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.dart {
  position: absolute;
  left: -8px;
  bottom: 0;
  width: 16px;
  height: 56px;
  opacity: 0;
  transform: translate(0, 130px);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
}
.dart .fin {
  position: absolute;
  left: 50%;
  top: 0;
  width: 16px;
  height: 15px;
  margin-left: -8px;
  background: #ff453a;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.dart .body {
  position: absolute;
  left: 50%;
  top: 12px;
  width: 4px;
  height: 33px;
  margin-left: -2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #d7dce3, #868d97);
}
.dart .tip {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 0;
  margin-left: -4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 12px solid #eef1f5;
}

/* ---------- 🏀 Canestro ---------- */
.court { position: relative; width: 300px; height: 250px; }
.backboard {
  position: absolute;
  top: 16px;
  left: 50%;
  width: 116px;
  height: 76px;
  margin-left: -58px;
  border-radius: 6px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
}
.backboard .square {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 50px;
  height: 36px;
  margin-left: -25px;
  border: 3px solid #ea580c;
  border-radius: 2px;
}
.rim {
  position: absolute;
  top: 88px;
  left: 50%;
  width: 80px;
  height: 11px;
  margin-left: -40px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ff7a3d, #c2410c);
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
}
.rim .rim-front {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  border-radius: 0 0 50% 50%;
  background: rgba(0,0,0,.18);
}
.rim.clang { animation: rim-clang .45s ease; }
@keyframes rim-clang {
  0%, 100% { transform: rotate(0) translateY(0); }
  30% { transform: rotate(-4deg) translateY(3px); }
  60% { transform: rotate(3deg) translateY(1px); }
}
.net {
  position: absolute;
  top: 96px;
  left: 50%;
  width: 68px;
  height: 44px;
  margin-left: -34px;
  display: flex;
  justify-content: space-between;
}
.net i {
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.1));
  transform-origin: top center;
}
.net.swish i { animation: swish .55s ease; }
.net.swish i:nth-child(2) { animation-delay: .04s; }
.net.swish i:nth-child(3) { animation-delay: .07s; }
.net.swish i:nth-child(4) { animation-delay: .04s; }
@keyframes swish {
  35% { transform: scaleY(1.3) rotate(3deg); }
  70% { transform: scaleY(.94) rotate(-3deg); }
}
.bball {
  position: absolute;
  bottom: 10px;
  left: 50%;
  margin-left: -22px;
  font-size: 44px;
  line-height: 1;
  will-change: transform;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
.court-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46px;
  border-top: 2px solid rgba(255,255,255,.4);
  background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.3));
}

/* ---------- ⚽ Rigore ---------- */
.pitch { position: relative; width: 320px; height: 250px; }
.goalframe {
  position: absolute;
  top: 24px;
  left: 50%;
  width: 252px;
  height: 132px;
  margin-left: -126px;
}
.goalframe .mesh {
  position: absolute;
  inset: 7px 7px 0;
  background-image:
    linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px);
  background-size: 15px 15px;
  opacity: .5;
  transform-origin: top center;
}
.goalframe .post {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7px;
  border-radius: 4px;
  background: #fff;
}
.goalframe .post.left { left: 0; }
.goalframe .post.right { right: 0; }
.goalframe .bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  border-radius: 4px;
  background: #fff;
}
.goalframe.ripple .mesh { animation: mesh-ripple .65s ease; }
@keyframes mesh-ripple {
  30% { transform: scaleY(1.08) translateY(5px); }
  70% { transform: scaleY(.97); }
}
.keeper {
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -19px;
  font-size: 38px;
  line-height: 1;
  will-change: transform;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.35));
}
.gball {
  position: absolute;
  bottom: 16px;
  left: 50%;
  margin-left: -20px;
  font-size: 40px;
  line-height: 1;
  will-change: transform;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
.spot {
  position: absolute;
  bottom: 12px;
  left: 50%;
  width: 56px;
  height: 11px;
  margin-left: -28px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
}

/* ---------- Verdetto + tabella premi ---------- */
.verdict {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--tg-bg);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}
.verdict b { font-size: 16px; font-weight: 900; }
.verdict span { font-size: 12px; font-weight: 600; opacity: .8; }
.verdict.running { color: var(--tg-hint); animation: verdict-pulse 1s ease-in-out infinite; }
.verdict.win { background: rgba(52,199,89,.16); color: #1f9d55; }
.verdict.near { background: rgba(255,159,10,.18); color: #b26a00; }
.verdict.lose { color: var(--tg-hint); }
@keyframes verdict-pulse { 50% { opacity: .45; } }

.paytable {
  margin-top: 12px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--tg-bg);
}
.paytable-h {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tg-hint);
  border-bottom: 1px solid rgba(127,127,127,.16);
}
.paytable-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  font-size: 14px;
  border-bottom: 1px solid rgba(127,127,127,.1);
}
.paytable-row:last-child { border-bottom: 0; }
.paytable-row b { color: #1f9d55; font-weight: 900; }

.play-cta .cta-emoji { font-size: 20px; line-height: 1; }

/* ---------- Anteprime sulle card della sala giochi ---------- */
.arcade-screen {
  width: 100%;
  height: 64px;
  margin-bottom: 6px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(160deg, #1f1235, #3a1d63);
}
.arcade-card.game-slot .arcade-screen { background: linear-gradient(160deg, #3a1370, #17082e); }
.arcade-card.game-dice .arcade-screen { background: linear-gradient(160deg, #14532d, #08301f); }
.arcade-card.game-darts .arcade-screen { background: linear-gradient(160deg, #44403c, #14110f); }
.arcade-card.game-basket .arcade-screen { background: linear-gradient(160deg, #ea580c, #7c2d12); }
.arcade-card.game-goal .arcade-screen { background: linear-gradient(160deg, #22c55e, #0d3d21); }
.prev {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.prev-slot i {
  font-style: normal;
  font-size: 19px;
  line-height: 1;
  padding: 3px 4px;
  border-radius: 6px;
  background: #fffdf7;
}
.prev-dice .pips {
  width: 44px;
  height: 44px;
  padding: 5px;
  border-radius: 9px;
  background: linear-gradient(145deg, #fffdf8, #e4dfd3);
}
.prev-dice .pip { width: 8px; height: 8px; }
.mini-board {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle,
    #e63946 0 14%, #f1e5c8 14% 38%, #1d1d20 38% 62%, #e63946 62% 80%, #17171a 80% 100%);
}
.mini-rim {
  display: block;
  width: 46px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ff7a3d, #c2410c);
}
.mini-net {
  display: block;
  width: 54px;
  height: 34px;
  border: 3px solid #fff;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background-image:
    linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 9px 9px;
}
.mini-ball {
  position: absolute;
  right: -6px;
  bottom: -4px;
  font-size: 22px;
  font-style: normal;
  line-height: 1;
}
.arcade-max {
  font-size: 11px;
  font-weight: 800;
  color: #ff9500;
}

@media (prefers-reduced-motion: reduce) {
  .slot-led,
  .hot-pill,
  .arcade-mascot,
  .verdict.running { animation: none !important; }
}

.menu-btn, .btn.ghost { /* compat */ }

/* ---------- Lancio manuale: guida di mira, leva, istruzioni ---------- */
.aim-guide {
  position: absolute;
  left: 50%;
  bottom: 26px;
  height: 8px;
  width: 0;
  opacity: 0;
  transform-origin: 0 50%;
  pointer-events: none;
  z-index: 5;
  transition: opacity .12s ease;
}
.arena-dice .aim-guide,
.arena-darts .aim-guide { bottom: 50%; }
.aim-guide > i {
  position: absolute;
  inset: 2px 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.25), #ffd60a var(--pw, 50%), rgba(255,255,255,.12) var(--pw, 50%));
  box-shadow: 0 0 12px rgba(255,214,10,.5);
}
.aim-guide::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -7px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid #ffd60a;
}

.lever {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 42px;
  height: 120px;
  margin-top: -60px;
  z-index: 5;
  touch-action: none;
  cursor: grab;
}
.lever.grab { cursor: grabbing; }
.lever-rod {
  position: absolute;
  left: 50%;
  top: 26px;
  width: 8px;
  height: 70px;
  margin-left: -4px;
  border-radius: 6px;
  background: linear-gradient(180deg, #d7dce3, #7e8590);
  transform: translateY(var(--pull, 0px)) scaleY(calc(1 - var(--pull, 0px) / 220));
  transform-origin: bottom center;
  transition: transform .16s cubic-bezier(.3,.8,.3,1);
}
.lever-knob {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ff8a7a, #d3262a 60%, #8f1216);
  box-shadow: 0 6px 14px rgba(0,0,0,.45), inset 0 -3px 6px rgba(0,0,0,.35);
  transform: translateY(var(--pull, 0px));
  transition: transform .16s cubic-bezier(.3,.8,.3,1);
}
.lever.grab .lever-rod,
.lever.grab .lever-knob { transition: none; }
.lever.fired .lever-knob { animation: lever-pop .4s ease; }
@keyframes lever-pop {
  40% { box-shadow: 0 6px 20px rgba(255,214,10,.7), inset 0 -3px 6px rgba(0,0,0,.35); }
}

.aim-hint {
  margin: -4px 0 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--tg-hint);
  letter-spacing: .01em;
}

/* Trascinando per lanciare non si deve selezionare il testo attorno all'arena. */
.aim-hint,
.verdict,
.play-cost,
.play-cta { user-select: none; -webkit-user-select: none; }

/* ==========================================================
   GIOCO A TUTTO SCHERMO
   La schermata di gioco occupa tutta la viewport: header e tab spariscono,
   l'arena prende tutto lo spazio libero fra HUD e comandi. Le scene NON
   vengono ridisegnate: restano nelle loro misure di progetto e vengono
   scalate (--sc), così ogni traiettoria animata resta identica ovunque.
   ========================================================== */

.scene {
  position: relative;
  flex: 0 0 auto;
  width: var(--sw, 320px);
  height: var(--sh, 250px);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(var(--sc, 1));
  transform-origin: center center;
  will-change: transform;
}
/* la prospettiva del dado va sulla scena: fra arena e cubo ora c'è lo scale */
.arena-dice .scene { perspective: 720px; }
/* il piano su cui rimbalza il dado resta a tutta larghezza anche se la scena
   è più stretta dell'arena: sborda ai lati e l'arena (overflow:hidden) taglia */
.scene .dice-floor { left: -100%; right: -100%; }

body.play-fs #app {
  max-width: none;
  min-height: 100dvh;
  height: 100dvh;
  padding: 0;
  overflow: hidden;
}
body.play-fs .top,
body.play-fs .tabs { display: none !important; }
body.play-fs .view {
  height: 100dvh;
  animation: none;
}
body.play-fs .toast { bottom: calc(24px + var(--sa-bottom, 0px)); }

.fs-game {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  overflow: hidden;
}

.fs-hud {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px;
  padding-top: calc(6px + var(--sa-top, 0px) + env(safe-area-inset-top, 0px));
}
.fs-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  background: var(--tg-bg);
  color: var(--tg-text);
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.fs-btn:active { transform: scale(.94); }
.fs-info {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 800;
  color: #0f0f12;
  background: linear-gradient(135deg, #ffd60a, #ff9f0a);
  box-shadow: 0 2px 12px rgba(255,190,10,.4);
  animation: fs-info-pulse 2.4s ease-in-out infinite;
}
@keyframes fs-info-pulse {
  0%, 100% { box-shadow: 0 2px 12px rgba(255,190,10,.35); }
  50% { box-shadow: 0 2px 18px rgba(255,190,10,.7); }
}
.fs-name {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.15;
}
.fs-name b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fs-name span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--tg-hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fs-pts {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--tg-bg);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.fs-pts img { display: block; }

/* L'arena mangia tutto lo spazio che avanza fra HUD e comandi. */
.fs-game .arena {
  flex: 1 1 auto;
  min-height: 0;
  margin: 4px 6px 8px;
}
.fs-foot {
  flex: 0 0 auto;
  padding: 0 12px;
  padding-bottom: calc(10px + var(--sa-bottom, 0px) + env(safe-area-inset-bottom, 0px));
}
.fs-foot .aim-hint { margin: 0 0 6px; }
.fs-foot .verdict { min-height: 48px; margin-bottom: 8px; }

/* Schermi bassi: comandi più compatti, l'arena resta la protagonista. */
@media (max-height: 680px) {
  .fs-foot .verdict { min-height: 40px; padding: 7px 10px; font-size: 13px; }
  .fs-foot .aim-hint { font-size: 11px; }
  .fs-name b { font-size: 14px; }
}

/* ---------- Popup (i): scende dall'alto con regole e premi ---------- */
.sheet-tag {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--tg-hint);
}
.sheet.open .sheet-block:nth-child(4) { animation-delay: .26s; }
.sheet.open .sheet-block:nth-child(5) { animation-delay: .32s; }
.sheet-paytable { margin-top: 6px; }
.sheet-paytable .paytable-row {
  font-size: 13px;
  padding: 6px 0;
}
#game-sheet .sheet-panel { max-height: min(88vh, 640px); }
#game-sheet .sheet-handle { margin: 8px auto 0; }

/* ==========================================================
   ACCOUNT SOSPESO
   Unica schermata visibile a chi è sospeso: motivo + riattivazione
   a pagamento in Stelle, con l'equivalente in euro accanto al prezzo.
   ========================================================== */
.suspended {
  text-align: center;
  padding: 18px 8px 10px;
}
.sus-badge {
  font-size: 54px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 6px 18px rgba(255,69,58,.4));
}
.suspended h1 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 800;
  color: var(--tg-destructive);
}
.suspended p {
  margin: 0 auto;
  max-width: 34em;
  font-size: 14px;
  line-height: 1.45;
  color: var(--tg-hint);
}
.sus-reason {
  margin-top: 8px !important;
  color: var(--tg-text) !important;
}
.sus-card {
  margin-top: 14px;
  padding: 16px;
  border-radius: 16px;
  background: var(--tg-bg);
  box-shadow: inset 0 0 0 1px rgba(255,214,10,.18);
  text-align: center;
}
.sus-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}
.sus-price b {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.sus-eur {
  font-size: 15px;
  font-weight: 700;
  color: var(--tg-hint);
}
.sus-card p {
  font-size: 13px;
  line-height: 1.45;
  color: var(--tg-hint);
  margin: 0 0 12px;
}
.sus-note {
  margin: 10px 0 0 !important;
  font-size: 11px !important;
}

/* App chiusa a chiave: niente barra tab, niente saldo, niente indietro.
   Resta solo il paywall della riattivazione. */
body.locked-out .tabs,
body.locked-out .pill,
body.locked-out #btn-back { display: none !important; }
body.locked-out .view { padding-bottom: 24px; }

/* ==========================================================
   PANNELLO ADMIN
   ========================================================== */
.adm-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.adm-tab {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: var(--tg-bg);
  color: var(--tg-hint);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.adm-tab.on {
  background: var(--tg-btn);
  color: var(--tg-btn-text);
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.stat-grid .stat {
  padding: 10px 6px;
  border-radius: 12px;
  background: var(--tg-bg);
  text-align: center;
}
.adm-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.adm-chip {
  border: 0;
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--tg-sec);
  color: var(--tg-hint);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.adm-chip.on { background: var(--tg-btn); color: var(--tg-btn-text); }
.adm-user {
  padding: 12px;
  border-radius: 14px;
  background: var(--tg-bg);
  margin-bottom: 8px;
}
.adm-user-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
}
.adm-user-h code {
  font-size: 11px;
  color: var(--tg-hint);
}
.adm-user-m {
  margin-top: 4px;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.adm-user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.btn.sm {
  width: auto;
  padding: 7px 11px;
  font-size: 12px;
  margin: 0;
}
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: var(--tg-sec);
  color: var(--tg-hint);
}
.tag.ok { background: rgba(52,199,89,.16); color: #34c759; }
.tag.bad { background: rgba(255,69,58,.16); color: var(--tg-destructive); }
.tag.warn { background: rgba(255,159,10,.16); color: #ff9f0a; }
.price-with-eur {
  display: flex;
  align-items: center;
  gap: 10px;
}
.price-with-eur input { margin-bottom: 8px; }
.eur-conv {
  flex: 0 0 auto;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 800;
  color: #ffd60a;
  white-space: nowrap;
}
.switch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 10px;
  font-size: 13px;
  font-weight: 600;
}
.switch input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: 0 0 auto;
}
.admin-tile strong { color: #ffd60a; }

/* ============================================================
   Assistenza / admin: un solo contatto umano, ripetuto in ogni
   schermata. La card piena sta in Assistenza e nel blocco sospeso,
   la variante .compact nelle pagine di servizio, la .support-chip in
   fondo alle schermate operative dove non deve rubare attenzione ai CTA.
   ============================================================ */
.support-card {
  margin-top: 14px;
  padding: 16px;
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(36,129,204,.18), transparent 60%),
    var(--tg-bg);
  box-shadow: inset 0 0 0 1px rgba(94,161,255,.22);
}
.support-card.compact { padding: 14px; }
.support-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.support-avatar {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(160deg, #5ea1ff, #2481cc);
  box-shadow: 0 6px 18px rgba(36,129,204,.35);
}
.support-id {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.support-role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tg-hint);
}
.support-handle {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--tg-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.support-badge {
  align-self: flex-start;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #30d158;
  background: rgba(48,209,88,.14);
}
.support-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 380px) {
  .support-actions { grid-template-columns: 1.3fr 1fr; }
}
.support-actions .btn { padding: 13px 14px; }
.support-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--tg-hint);
}
.support-card.compact .support-note { margin: 0 0 10px; }

.support-topics {
  display: grid;
  gap: 8px;
}
.support-topic {
  appearance: none;
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 14px;
  text-align: left;
  font: inherit;
  color: var(--tg-text);
  background: var(--tg-bg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  cursor: pointer;
}
.support-topic:active { transform: scale(.99); }
.support-topic-ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 17px;
  background: rgba(94,161,255,.12);
}
.support-topic-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.support-topic-copy strong {
  font-size: 14px;
  font-weight: 700;
}
.support-topic-copy span {
  font-size: 12px;
  line-height: 1.35;
  color: var(--tg-hint);
}
.support-topic-go {
  flex: 0 0 auto;
  font-size: 20px;
  color: var(--tg-hint);
}
.support-foot {
  margin: 14px 4px 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--tg-hint);
}

.support-chip {
  appearance: none;
  border: 0;
  width: 100%;
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  color: var(--tg-hint);
  background: var(--tg-bg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  cursor: pointer;
}
.support-chip b { color: var(--tg-text); }
.support-chip > span:nth-child(2) {
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.support-chip:active { transform: scale(.99); }
.support-chip-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #30d158;
  box-shadow: 0 0 0 4px rgba(48,209,88,.16);
}
.support-chip-go {
  flex: 0 0 auto;
  font-size: 18px;
}

/* ============================================================
   Accessibilità, caricamento e stati vuoti
   ============================================================ */

/* Testo per i soli lettori di schermo. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Nessun elemento interattivo aveva un contorno di focus: da tastiera (Telegram
   Desktop, Web) non si capiva dove si fosse. Solo :focus-visible, così il tocco
   sul telefono resta pulito. */
:focus-visible {
  outline: 2px solid var(--tg-link);
  outline-offset: 2px;
  border-radius: 10px;
}
.tab:focus-visible,
.pill:focus-visible,
.mega-tile:focus-visible,
.arcade-card:focus-visible,
.rw-card:focus-visible { outline-offset: -2px; }

/* ---------- Scheletro di caricamento ---------- */
.skeleton { display: grid; gap: 12px; }
.sk {
  border-radius: 16px;
  background: linear-gradient(100deg,
    rgba(255,255,255,.04) 30%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.04) 70%);
  background-size: 220% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}
.sk-hero { height: 64px; border-radius: 14px; }
.sk-line { height: 40px; border-radius: 12px; }
.sk-card { height: 96px; }
.sk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sk-tile { height: 132px; border-radius: 20px; }
@keyframes sk-shimmer {
  from { background-position: 140% 0; }
  to { background-position: -40% 0; }
}

/* ---------- Cambio schermata ---------- */
/* Dissolvenza corta al posto del lampo secco dell'innerHTML. */
.view-in { animation: view-fade .16s ease-out; }
@keyframes view-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Stati vuoti ---------- */
.empty-state {
  background: var(--tg-bg);
  border-radius: 18px;
  padding: 22px 18px;
  margin-bottom: 12px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 8px;
}
.empty-state img { display: block; opacity: .9; }
.empty-state strong { font-size: 16px; }
.empty-state p { margin: 0; color: var(--tg-hint); font-size: 13px; line-height: 1.45; }
.empty-state .btn { width: auto; margin-top: 4px; padding: 10px 18px; }
.empty-steps {
  margin: 6px 0 0;
  padding: 0 0 0 20px;
  text-align: left;
  display: grid;
  gap: 6px;
  color: var(--tg-hint);
  font-size: 13px;
  line-height: 1.4;
}
.empty-steps li { padding-left: 2px; }

.boot-err-detail { font-size: 11px; text-align: center; margin: 10px 0 0; opacity: .7; }

/* ---------- Meno animazioni ----------
   Chi attiva la preferenza di sistema soffre di motion sickness: qui muore
   tutto ciò che si muove da solo in loop, senza chiedere niente all'utente.
   Le animazioni dei giochi restano (servono a capire l'esito) ma anim() le
   accorcia a un quarto. */
@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; background: rgba(255,255,255,.06); }
  .view-in { animation: none; }
  .live-ticker.tick-in { animation: none; }
  .mega-tile > img { animation: none; }
  .pulse-border { animation: none; }
  .toast { transition: opacity .1s linear; transform: translate(-50%, 0); }
  .sheet-panel,
  .sheet-backdrop { transition-duration: .01ms; }
  .modal-card { animation: none; }
  .btn { transition: none; }
}