/* The Afterbluss — il mondo del gioco: curve di livello, rombi rossi, graffiti gialli */
.ab{--ab-yellow:#E9C424;--ab-red:#D52A2B;--ab-red-2:#B21E21;--ab-ink:#0E0E0D;--ab-paper:#F3F0E9;--ab-line:#2C2C2A;--font-cond:'Barlow Condensed','Arial Narrow',sans-serif}
.ab body,.ab{background:var(--ab-ink)}
.topo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.redbar{display:inline-block;background:var(--ab-red);color:#fff;font-family:var(--font-cond);font-weight:800;text-transform:uppercase;letter-spacing:.01em;padding:.08em .4em .02em;line-height:1.05}
.ab h2.redbar{margin:0;font-size:clamp(40px,6.5vw,88px)}
.ab .sec-head h2{font-family:var(--font-cond);font-weight:800}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;color:var(--smoke);font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.back:hover{color:var(--chalk)}

/* ---------- hero ---------- */
.ab-hero{position:relative;min-height:min(100svh,980px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  padding:calc(120px + env(safe-area-inset-top,0px)) var(--gutter) 90px;overflow:hidden;text-align:center}
.ab-hero .logo{width:min(820px,92vw);filter:drop-shadow(0 30px 50px rgba(0,0,0,.6));transform:scale(var(--s,1)) rotate(var(--r,0deg));will-change:transform}
.ab-hero .logo img{width:100%;height:auto}
.ab-hero .tagline{font-size:clamp(26px,3.6vw,48px)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0;list-style:none}
.chips li{padding:8px 14px;border:1px solid #3a3a37;border-radius:999px;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--chalk-2);background:rgba(14,14,13,.6)}
.ab-hero .row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.btn.yellow{background:var(--ab-yellow);color:var(--ab-ink)}
.btn.yellow:hover{background:#F5D649}
.btn.red{background:var(--ab-red);color:#fff}
.btn.red:hover{background:var(--ab-red-2)}

/* ---------- come si gioca ---------- */
.how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(32px,6vw,96px);max-width:var(--max);margin:0 auto;align-items:start}
.how .big{font-family:var(--font-cond);font-weight:800;font-size:clamp(120px,20vw,280px);line-height:.8;color:var(--ab-yellow);letter-spacing:-.02em}
.how .big small{display:block;font-family:var(--font-mono);font-size:13px;letter-spacing:.18em;color:var(--smoke);margin-top:18px;line-height:1.4}
.rules{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0}
.rules li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;padding:22px 0;border-bottom:1px solid var(--ab-line)}
.rules li b{font-family:var(--font-cond);font-weight:800;font-size:34px;line-height:1;color:var(--ab-red)}
.rules li p{margin:0;font-size:19px}
.rules em{font-style:normal;color:var(--ab-yellow);font-weight:700}

/* ---------- carte ---------- */
.deck-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);max-width:var(--max);margin:0 auto;align-items:center}
.deck{position:relative;width:min(340px,80vw);aspect-ratio:63/88;margin:0 auto;perspective:1600px}
.deck .stack{position:absolute;inset:0;border-radius:14px;background:#111;box-shadow:6px 6px 0 #0a0a0a,12px 12px 0 #070707,0 30px 50px rgba(0,0,0,.6)}
.card{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s var(--ease)}
.card.flip{transform:rotateY(180deg) translateY(-8px)}
.card .face{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.card .back{background:#111;display:flex;align-items:center;justify-content:center}
.card .back canvas{position:absolute;inset:0;width:100%;height:100%}
.card .back img{position:relative;width:84%}
.card .front{transform:rotateY(180deg);background:var(--ab-paper);color:var(--ab-ink);display:flex;flex-direction:column;padding:18px;gap:12px}
.card .front .hd{align-self:flex-start;background:var(--ab-red);color:#fff;font-family:var(--font-cond);font-weight:800;font-size:22px;padding:4px 10px}
.card .front h3{margin:0;font-family:var(--font-cond);font-weight:800;font-size:clamp(24px,2.6vw,32px);line-height:1;text-transform:uppercase}
.card .front p{position:relative;margin:0;font-size:19px;line-height:1.4}
.card .front .fx{margin-top:auto;padding-top:12px;border-top:2px solid var(--ab-ink);font-family:var(--font-cond);font-weight:700;font-size:18px;text-transform:uppercase}
.card .front img{position:absolute;left:50%;top:58%;width:78%;transform:translate(-50%,-50%) rotate(-8deg);opacity:.13;pointer-events:none}
.card .front .fx{position:relative}
.card .front h3,.card .front .hd{position:relative}
.deck-info h2{margin:0 0 18px}
.deck-info p{color:var(--chalk-2);max-width:42ch}
.deck-info .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.deck-info .left{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);margin-top:18px}

/* ---------- nella scatola ---------- */
.inbox{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:var(--max);margin:0 auto;padding:0;list-style:none}
.inbox li{min-width:0;display:flex;flex-direction:column;gap:14px;padding:22px;background:#151514;border:1px solid var(--ab-line);border-radius:10px;transition:transform .4s var(--ease),border-color .3s}
.inbox li:hover{transform:translateY(-6px);border-color:var(--ab-yellow)}
.inbox .pic{height:170px;display:flex;align-items:center;justify-content:center}
.inbox .pic img{max-height:170px;width:auto;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(0,0,0,.55))}
.inbox h3{margin:0;font-family:var(--font-cond);font-weight:800;font-size:26px;text-transform:uppercase;line-height:1}
.inbox p{margin:0;color:var(--smoke);font-size:16px}
.gift{max-width:var(--max);margin:clamp(48px,6vw,80px) auto 0}
.gift h3{margin:0 0 18px}
.gift .inbox li{background:transparent;border-style:dashed}

/* ---------- FAQ ---------- */
.faq{max-width:900px;margin:0 auto}
.faq details{border-bottom:1px solid var(--ab-line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-family:var(--font-cond);font-weight:700;font-size:clamp(20px,2.2vw,26px);text-transform:uppercase;line-height:1.1}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);font-size:24px;color:var(--ab-yellow);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 22px;color:var(--chalk-2);max-width:62ch}
.faq a{color:var(--ab-yellow)}

/* ---------- chiusura ---------- */
.final{text-align:center;overflow:hidden}
.final h2{margin:0 auto;font-family:var(--font-cond);font-weight:800;font-size:clamp(64px,12vw,190px);line-height:.85;text-transform:uppercase;max-width:12ch}
.final h2 span{color:var(--ab-yellow)}
.final .price{margin:24px 0 0;font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
.final .row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}

@media (max-width:900px){
  .how,.deck-wrap{grid-template-columns:1fr}
  .inbox{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .inbox{grid-template-columns:1fr}
}
.section>*:not(.topo),.ab-hero>*:not(.topo){position:relative}
.final .pre-note{margin:12px auto 0;max-width:46ch;color:var(--chalk-2);font-size:17px}
.final .pre-note b{color:#25D366;font-weight:700}