/* =====================================================================================================================
   Ruota delle carte nello Shop (21/10/2026). Il titolare: «nello shop fare dei tier dove cambia la carta e fa
   un'animazione tipo ruota ... usare questo modello con la carta» e «aggiungiamo di fianco una o più monete ... in 3d».
   Le carte sono la stessa carta ASSER COIN di "Il tuo piano" (asser-ai-carta.css), una per livello con il suo fondo.
   Senza questo foglio lo Shop resta quello di prima. Le schede d'acquisto vere restano sotto, come sempre.
   ===================================================================================================================== */
.shw {
  --shw-w: min(440px, 76vw);
  margin: 0 0 2rem;
  padding: clamp(18px, 3vw, 36px) clamp(12px, 2.4vw, 30px) clamp(18px, 2.6vw, 30px);
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(40, 18, 30, 0.04), 0 24px 60px rgba(40, 18, 30, 0.08);
  overflow: hidden;
}
.shw + .shw { margin-top: -0.6rem; }
.shw__head { text-align: center; }
.shw__head .pw-kicker { margin-bottom: 0.3rem; }
.shw__title { margin: 0; color: var(--asser-secondary, #4b2338); font: 800 clamp(1.6rem, 3.4vw, 2.5rem)/1.1 "Sora", "Manrope", system-ui, sans-serif; letter-spacing: -0.03em; text-wrap: balance; }

/* i livelli: un controllo a capsule come quelli di Apple */
.shw__tabs {
  display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 1.2rem auto 0; padding: 4px;
  overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: rgba(125, 68, 94, 0.08);
}
.shw__tabs::-webkit-scrollbar { display: none; }
.shw__tab {
  flex: none; padding: 0.55rem 1rem; border: 0; border-radius: 999px; background: transparent;
  color: var(--asser-muted, #6a626a); font: 700 0.88rem/1.2 "Manrope", system-ui, sans-serif; white-space: nowrap; cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.shw__tab:hover { color: var(--asser-secondary, #4b2338); }
.shw__tab.is-on { background: #fff; color: var(--asser-secondary, #4b2338); box-shadow: 0 2px 8px rgba(40, 18, 30, 0.12), 0 0 0 0.5px rgba(40, 18, 30, 0.06); }
.shw__tab:focus-visible { outline: 3px solid rgba(176, 66, 79, 0.4); outline-offset: 1px; }

.shw__stage { display: grid; gap: clamp(1rem, 2vw, 2rem); margin-top: clamp(1rem, 2.4vw, 1.8rem); align-items: center; }
@media (min-width: 1000px) {
  .shw__stage { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* la ruota: le carte su un cilindro, quella scelta davanti */
.shw__wheel {
  position: relative; height: calc(var(--shw-w) / 1.586 + 56px);
  perspective: 1400px; perspective-origin: 50% 45%;
  touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none;
  overflow: hidden;
  /* le carte di lato sfumano verso i bordi: la ruota resta nel suo spazio */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.shw__wheel.is-drag { cursor: grabbing; }
.shw__ring {
  position: absolute; left: 50%; top: 22px; width: var(--shw-w); aspect-ratio: 1.586 / 1; margin-left: calc(var(--shw-w) / -2);
}
/* ogni carta ha la sua posizione sulla ruota, calcolata dallo script a ogni fotogramma (nessun 3D annidato: uguale su tutti i browser) */
.shw__slot {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.shw__slot:not(.is-on) { cursor: pointer; }
/* senza script: solo la carta scelta, al centro */
.shw:not(.is-live) .shw__slot:not(.is-on) { display: none; }
.shw__card { pointer-events: none; transform: none; }
.shw__name { font-size: clamp(22px, 8.6cqi, 44px); letter-spacing: -0.03em; }
.shw__money { top: 40%; right: 8cqi; }
.shw__money .pwc__label { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; letter-spacing: 0.1em; }
.shw__card .pwc__holder { font: 800 clamp(13px, 4.2cqi, 20px)/1 "Sora", "Manrope", system-ui, sans-serif; letter-spacing: -0.01em; }
.shw__card .pwc__holder small { margin-left: 0.3em; color: rgba(255, 255, 255, 0.7); font: 700 clamp(9px, 2.4cqi, 12px)/1 "Manrope", system-ui, sans-serif; letter-spacing: 0.04em; }
.shw__badge { padding: max(4px, 1cqi) max(9px, 2.4cqi); border-radius: 999px; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.4); font-size: clamp(9px, 2.3cqi, 12px); letter-spacing: 0.06em; }

/* i fondi dei livelli: stesso modello, velo nei toni del livello */
.shw__card--perla .pwc__veil { background: linear-gradient(90deg, rgba(110, 52, 78, 0.66) 0%, rgba(110, 52, 78, 0.32) 44%, rgba(110, 52, 78, 0) 74%), linear-gradient(0deg, rgba(90, 40, 62, 0.5) 0%, rgba(90, 40, 62, 0) 40%); }
.shw__card--rosa .pwc__veil { background: linear-gradient(90deg, rgba(80, 26, 52, 0.62) 0%, rgba(80, 26, 52, 0.3) 44%, rgba(80, 26, 52, 0) 74%), linear-gradient(0deg, rgba(70, 20, 44, 0.5) 0%, rgba(70, 20, 44, 0) 40%); }
.shw__card--ametista .pwc__veil { background: linear-gradient(90deg, rgba(18, 8, 34, 0.78) 0%, rgba(18, 8, 34, 0.42) 44%, rgba(18, 8, 34, 0) 74%), linear-gradient(0deg, rgba(18, 8, 34, 0.55) 0%, rgba(18, 8, 34, 0) 40%); }
.shw__card--oro .pwc__veil { background: linear-gradient(90deg, rgba(42, 20, 12, 0.78) 0%, rgba(42, 20, 12, 0.4) 44%, rgba(42, 20, 12, 0) 74%), linear-gradient(0deg, rgba(42, 20, 12, 0.5) 0%, rgba(42, 20, 12, 0) 40%); }
.shw__card--quarzo .pwc__veil { background: linear-gradient(90deg, rgba(74, 30, 54, 0.66) 0%, rgba(74, 30, 54, 0.3) 44%, rgba(74, 30, 54, 0) 72%), linear-gradient(0deg, rgba(60, 22, 42, 0.5) 0%, rgba(60, 22, 42, 0) 40%); }
.shw__card--corallo .pwc__veil { background: linear-gradient(90deg, rgba(92, 26, 38, 0.66) 0%, rgba(92, 26, 38, 0.3) 44%, rgba(92, 26, 38, 0) 72%), linear-gradient(0deg, rgba(80, 20, 30, 0.5) 0%, rgba(80, 20, 30, 0) 40%); }
.shw__card--rubino .pwc__veil { background: linear-gradient(90deg, rgba(48, 6, 18, 0.74) 0%, rgba(48, 6, 18, 0.38) 44%, rgba(48, 6, 18, 0) 72%), linear-gradient(0deg, rgba(48, 6, 18, 0.5) 0%, rgba(48, 6, 18, 0) 40%); }
.shw__card--notte .pwc__veil { background: linear-gradient(90deg, rgba(10, 8, 30, 0.7) 0%, rgba(10, 8, 30, 0.34) 44%, rgba(10, 8, 30, 0) 72%), linear-gradient(0deg, rgba(10, 8, 30, 0.5) 0%, rgba(10, 8, 30, 0) 40%); }
.shw__card--rame .pwc__veil { background: linear-gradient(90deg, rgba(30, 12, 8, 0.74) 0%, rgba(30, 12, 8, 0.36) 44%, rgba(30, 12, 8, 0) 72%), linear-gradient(0deg, rgba(30, 12, 8, 0.5) 0%, rgba(30, 12, 8, 0) 40%); }
.shw__card--platino .pwc__veil { background: linear-gradient(90deg, rgba(14, 12, 18, 0.74) 0%, rgba(14, 12, 18, 0.36) 44%, rgba(14, 12, 18, 0) 72%), linear-gradient(0deg, rgba(14, 12, 18, 0.5) 0%, rgba(14, 12, 18, 0) 40%); }
/* Platino: filo d'argento sul bordo */
.shw__card--platino { box-shadow: 0 34px 60px -24px rgba(20, 16, 24, 0.6), 0 14px 26px -14px rgba(20, 16, 24, 0.45), inset 0 0 0 1px rgba(232, 232, 240, 0.55); }

/* ---- Studio Gold (21/10/2026, «migliorando la grafica dell'abbonamento gold») --------------------------------------
   Carta d'oro: video delle monete d'oro (assets/media/shop-oro.mp4, parte solo con asser-ai-carta.js, mai con "riduci
   movimento"), filo champagne sul bordo, nome e capsula in oro. Accanto prezzo e bottone dorati; nella griglia la scheda
   Studio Gold ha cornice e nome d'oro. */
.shw__card--oro {
  box-shadow: 0 34px 60px -22px rgba(90, 52, 10, 0.55), 0 14px 26px -14px rgba(60, 30, 8, 0.45), inset 0 0 0 1px rgba(246, 214, 150, 0.7), inset 0 0 0 2px rgba(120, 76, 20, 0.35);
}
.shw__card--oro .shw__name {
  background: linear-gradient(100deg, #fff4d6 0%, #f3cf86 30%, #fff1c9 52%, #d9a650 78%, #fbe3a6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}
.shw__card--oro .pwc__chip {
  background: linear-gradient(135deg, rgba(255, 236, 190, 0.95), rgba(214, 164, 82, 0.95));
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.7), 0 4px 14px rgba(80, 46, 8, 0.35);
  color: #4a2c08;
}
.shw__card--oro .pwc__brand { color: #fbe7b8; }
.shw__card--oro .shw__badge { background: rgba(255, 228, 170, 0.2); box-shadow: inset 0 0 0 0.5px rgba(255, 228, 170, 0.6); color: #fff1cf; }
.shw__panel--oro .shw__kind { color: #a8741f; }
.shw__panel--oro .shw__price strong {
  background: linear-gradient(100deg, #8a5a12 0%, #c99236 40%, #7a4e0e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.shw__panel--oro .shw__features li::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat, linear-gradient(135deg, #e7c174, #a8741f);
}
.shw__panel--oro .shw__buy {
  border-color: transparent;
  background: linear-gradient(135deg, #f6dc9c 0%, #d9a650 52%, #b9822e 100%);
  box-shadow: 0 10px 26px rgba(150, 100, 30, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  color: #3d2406;
}
.shw__panel--oro .shw__buy:hover { filter: brightness(1.04); }
/* la scheda Studio Gold nella griglia */
.pw-tile--oro {
  border-color: transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #f6dc9c, #c99236 45%, #f3d58f 70%, #a8741f) border-box;
  border-width: 1.5px; border-style: solid;
  box-shadow: 0 16px 40px rgba(150, 100, 30, 0.16);
}
.pw-tile--oro .pw-tile__name {
  background: linear-gradient(100deg, #8a5a12 0%, #c99236 45%, #7a4e0e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pw-tile--oro .pw-badge--accent { background: linear-gradient(135deg, #f6dc9c, #d9a650); color: #3d2406; }
.pw-tile--oro .pw-button:not(.pw-button--ghost) { border-color: transparent; background: linear-gradient(135deg, #f6dc9c 0%, #d9a650 52%, #b9822e 100%); color: #3d2406; }
.pw-note--iva { margin-top: 0.4rem; text-align: center; font-size: 0.82rem; }

/* accanto: le monete in 3D e il riepilogo del livello */
.shw__side { display: grid; gap: 0.6rem; justify-items: center; text-align: center; }
@media (min-width: 1000px) { .shw__side { justify-items: start; text-align: left; } }
.shw__coins { position: relative; width: min(100%, 320px); height: 210px; }
.shw__coins .am3d__gl { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; }
.shw__coins.is-3d .shw__coins-css { display: none; }
.shw__coins-css { display: flex; align-items: flex-end; justify-content: center; height: 100%; padding-bottom: 18px; }
.shw__coins-css .ac-stack { --ac: 72px; }
.shw__panel { display: grid; gap: 0.35rem; justify-items: inherit; max-width: 440px; }
.shw__panel[hidden] { display: none; }
.shw__panel.is-in { animation: shw-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.shw__kind { margin: 0; color: var(--asser-accent, #b0424f); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.shw__panel-name { margin: 0; color: var(--asser-secondary, #4b2338); font: 800 clamp(1.6rem, 3vw, 2.2rem)/1.05 "Sora", "Manrope", system-ui, sans-serif; letter-spacing: -0.03em; }
.shw__tagline { margin: 0; color: var(--asser-muted, #6a626a); font-size: 0.95rem; line-height: 1.45; }
.shw__price { margin: 0.4rem 0 0; color: var(--asser-secondary, #4b2338); }
.shw__price strong { font: 800 clamp(1.9rem, 3.6vw, 2.6rem)/1 "Sora", "Manrope", system-ui, sans-serif; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.shw__price span { color: var(--asser-muted, #6a626a); font-size: 0.9rem; font-weight: 700; }
.shw__price del { color: var(--asser-muted, #6a626a); font-size: 0.95rem; }
.shw__credits { margin: 0; color: var(--asser-text, #2a1f27); font-size: 0.95rem; font-weight: 700; }
.shw__per { margin: 0; color: var(--asser-muted, #6a626a); font-size: 0.82rem; }
.shw__features { display: grid; gap: 0.3rem; margin: 0.4rem 0 0; padding: 0; list-style: none; text-align: left; }
.shw__features li { position: relative; padding-left: 1.5rem; color: var(--asser-text, #2a1f27); font-size: 0.88rem; line-height: 1.4; }
.shw__features li::before {
  content: ""; position: absolute; left: 0; top: 0.18rem; width: 0.95rem; height: 0.95rem; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat, linear-gradient(135deg, #e0789f, #b0424f);
}
.shw__buy { margin-top: 0.8rem; min-width: 220px; justify-content: center; text-align: center; }
.shw__buy.is-off { opacity: 0.55; cursor: not-allowed; }
.shw__more { color: var(--asser-accent, #b0424f); font-size: 0.84rem; font-weight: 700; }
.pw-tile.is-shw-flash { animation: shw-flash 1.6s ease; }

@keyframes shw-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes shw-flash { 0%, 100% { box-shadow: 0 1px 2px rgba(40, 18, 30, 0.04), 0 18px 48px rgba(40, 18, 30, 0.07); } 30% { box-shadow: 0 0 0 4px rgba(224, 120, 159, 0.55), 0 18px 48px rgba(40, 18, 30, 0.12); } }

@media (max-width: 640px) {
  .shw { --shw-w: min(330px, 80vw); padding: 18px 8px 20px; border-radius: 28px; }
  .shw__wheel { height: calc(var(--shw-w) / 1.586 + 34px); }
  .shw__stage { gap: 0.2rem; }
  .shw__coins { height: 150px; }
  .shw__panel { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .shw__panel.is-in, .pw-tile.is-shw-flash { animation: none; }
}

/* ---- tema scuro (scritto a mano) ------------------------------------------------------------------------------- */
html[data-asser-theme="dark"] body .shw { background: #1d1719; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.45); }
html[data-asser-theme="dark"] body .shw__title,
html[data-asser-theme="dark"] body .shw__panel-name,
html[data-asser-theme="dark"] body .shw__price { color: #fff; }
html[data-asser-theme="dark"] body .shw__tabs { background: rgba(255, 255, 255, 0.07); }
html[data-asser-theme="dark"] body .shw__tab { color: #a89aa1; }
html[data-asser-theme="dark"] body .shw__tab.is-on { background: #3a2f34; color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }
html[data-asser-theme="dark"] body .shw__kind,
html[data-asser-theme="dark"] body .shw__more { color: #f4b3cb; }
html[data-asser-theme="dark"] body .shw__tagline,
html[data-asser-theme="dark"] body .shw__price span,
html[data-asser-theme="dark"] body .shw__price del,
html[data-asser-theme="dark"] body .shw__per { color: #a89aa1; }
html[data-asser-theme="dark"] body .shw__credits,
html[data-asser-theme="dark"] body .shw__features li { color: #efe6ea; }
html[data-asser-theme="dark"] body .shw__panel--oro .shw__kind { color: #e9c77e; }
html[data-asser-theme="dark"] body .shw__panel--oro .shw__price strong { background-image: linear-gradient(100deg, #fff1c9 0%, #f0c46e 45%, #d9a650 100%); }
html[data-asser-theme="dark"] body .pw-tile--oro { background: linear-gradient(#211a1d, #211a1d) padding-box, linear-gradient(135deg, #f6dc9c, #c99236 45%, #f3d58f 70%, #a8741f) border-box; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); }
html[data-asser-theme="dark"] body .pw-tile--oro .pw-tile__name { background-image: linear-gradient(100deg, #fff1c9 0%, #f0c46e 45%, #d9a650 100%); }