/* Componenti riusabili: carte, demo, torre laterale, targhe, modulo, conto alla rovescia. */

.card { background: var(--paper); border: 2px solid var(--line); border-radius: 24px; padding: 28px 26px; min-width: 0; display: flex; flex-direction: column; gap: 14px; position: relative; box-shadow: 0 6px 0 rgba(26, 46, 71, .10); }
.card h3 { font-family: var(--f-display); font-weight: 400; font-size: 28px; letter-spacing: .01em; line-height: 1.1; }
.card > p { color: var(--ink2); }
[data-tilt] { transform-style: preserve-3d; will-change: transform; }

/* ---------- torre laterale (solo dove c'e' spazio a lato; la misura la decide js/torre.js) ---------- */
.torre { --c: 28px; position: fixed; z-index: 40; right: 12px; bottom: 0; width: calc(var(--c) * 4); pointer-events: none; display: none; }
.torre.on { display: block; }
html.has-torre .progress { display: none; }
.t-hud { text-align: center; font-family: var(--f-display); color: #fff; line-height: 1; margin-bottom: 8px; text-shadow: 0 3px 0 rgba(26, 46, 71, .5); }
.t-hud b { font-weight: 400; font-size: 44px; font-variant-numeric: tabular-nums; }
.t-hud span { font-size: 20px; margin-left: 3px; }
.t-stack { position: relative; transform-origin: 50% 100%; }
.t-base { height: 16px; width: calc(100% + 14px); margin-left: -7px; border-radius: 8px 8px 0 0; background: linear-gradient(#c98f5f, #a0623a); border: 3px solid #5c3a1e; border-bottom: 0; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35); }
.t-oops { position: absolute; left: -70px; bottom: 100%; margin-bottom: 60px; background: var(--paper); color: var(--ink); border-radius: 14px 14px 4px 14px; padding: 6px 12px; font-weight: 600; font-size: 14px; white-space: nowrap; opacity: 0; transform: scale(.6); transform-origin: 100% 100%; border: 2px solid var(--line); }

/* un pezzo impilato (torre laterale e laboratorio): lo sprite sta al centro della sua scatola di celle */
.tp { position: absolute; padding: 0; border: 0; background: none; transform-origin: 50% 100%; pointer-events: auto; cursor: pointer; display: block; }
div.tp { pointer-events: none; cursor: default; }
.tp img { position: absolute; left: 50%; top: 50%; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; filter: drop-shadow(2px 3px 0 rgba(10, 30, 60, .32)); }
button.tp:hover img { filter: drop-shadow(2px 3px 0 rgba(10, 30, 60, .32)) brightness(1.12); }
button.tp[data-label]::after { content: attr(data-label); position: absolute; right: calc(100% + 10px); top: 50%; translate: 6px -50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 8px; white-space: nowrap; opacity: 0; transition: opacity .15s, translate .15s; pointer-events: none; }
button.tp:hover::after, button.tp:focus-visible::after { opacity: 1; translate: 0 -50%; }

/* ---------- cursore a pezzo (solo puntatore fine) ---------- */
.nopointer { cursor: default; }

/* ---------- targhe ---------- */
.targhe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.targa { position: relative; container-type: inline-size; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.targa:hover { transform: translateY(-4px) rotate(-2deg) scale(1.04); }
.targa img { width: 100%; height: auto; display: block; }
.targa span { position: absolute; inset: 40% 9% 14%; display: grid; place-items: center; text-align: center; font-family: var(--f-display); color: #fff; line-height: 1.05; font-size: 7.4cqi; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }

/* ---------- carte ricompensa ---------- */
.tier { background: var(--paper); border: 2px solid var(--line); border-radius: 24px; padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 16px; min-width: 0; position: relative; overflow: hidden; box-shadow: 0 6px 0 rgba(26, 46, 71, .10); }
.tier .price { font-size: 50px; align-self: flex-start; }
.tier ul { display: grid; gap: 9px; }
.tier li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.4; }
.tier li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 12px; height: 12px; border-radius: 4px; background: var(--green); box-shadow: 0 2px 0 var(--green-lo); }
.tier.top { border-color: var(--gold); background: linear-gradient(#fffbea, #fff); }
.tier.top::before { content: ""; position: absolute; inset: -40% -60%; background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .85) 50%, transparent 58%); animation: shine 3.8s ease-in-out infinite; pointer-events: none; }
@keyframes shine { 0%, 55% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
.tier.wide { grid-column: span 4; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 22px 40px; }
.tier.wide > div { flex: 1 1 260px; min-width: 0; }

/* ---------- carta modulo + conto alla rovescia ---------- */
.countdown { display: grid; gap: 12px; justify-items: center; }
.cd-label { font-weight: 600; background: var(--pill); border-radius: 14px; padding: 8px 16px; max-width: 520px; }
.cd-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.cd { background: var(--night); color: #fff; border-radius: 16px; padding: 10px 0 8px; min-width: 76px; text-align: center; box-shadow: 0 5px 0 #142544; }
.cd b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 40px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cd span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #a9bbdb; }
.cd b.tick { animation: tick .35s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes tick { 0% { transform: translateY(-40%) scaleY(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.news { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; width: 100%; max-width: 560px; position: relative; }
.news input[type=email] { flex: 1 1 240px; min-width: 0; height: 54px; border-radius: 16px; border: 3px solid var(--ink); background: #fff; padding: 0 18px; font-family: var(--f-body); font-size: 18px; font-weight: 500; color: var(--ink); box-shadow: inset 0 3px 0 rgba(26, 46, 71, .12); }
.news input[type=email]:focus { outline: 3px solid var(--gold); outline-offset: 2px; }
.news .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.news-msg { flex-basis: 100%; min-height: 1.6em; font-weight: 600; background: var(--pill); border-radius: 12px; padding: 4px 12px; display: none; }
.news-msg.show { display: block; }
.news-msg.err { color: #b3201c; }
.news.ok input, .news.ok button { display: none; }