/* Mad Spliff — il mondo del gioco: muro nero, bubble graffiti, gocce, quattro semi.
   Si appoggia ad afterbluss.css per la struttura (chips, regole, scatola, FAQ, chiusura) e cambia tutta la pelle. */
.ms{--ab-yellow:#ECE21A;--ab-red:#E2302F;--ab-red-2:#B8201F;--ab-ink:#101318;--ab-line:#2A313B;--ab-paper:#EDE7DB;
  --ms-slate:#232A33;--ms-slate-2:#1A2028;--ms-r:#E2302F;--ms-g:#ECE21A;--ms-b:#3A6FC4;--ms-v:#A3248B;--ms-jolly:#4FB52E;--ms-sbirro:#3FB3A3;
  --font-bang:'Bangers','Anton',Impact,sans-serif}
.ms,.ms body{background:var(--ab-ink)}
.ms .redbar{font-family:var(--font-bang);font-weight:400;letter-spacing:.04em;background:var(--ms-v);padding:.1em .35em .02em;transform:rotate(-1.5deg)}
.ms h2.redbar{font-size:clamp(46px,7vw,96px)}
.ms .sec-head h2,.ms .inbox h3,.ms .faq summary,.ms .final h2{font-family:var(--font-bang);font-weight:400;letter-spacing:.03em}
.ms .chips li{background:rgba(16,19,24,.7);border-color:#3a434f}
.ms .rules li b{font-family:var(--font-bang);font-weight:400;font-size:40px}
.ms .rules li:nth-child(1) b{color:var(--ms-r)}.ms .rules li:nth-child(2) b{color:var(--ms-g)}
.ms .rules li:nth-child(3) b{color:var(--ms-b)}.ms .rules li:nth-child(4) b{color:var(--ms-v)}
.ms .rules li p b{font:inherit;font-weight:700;color:var(--chalk);display:inline}
.ms .how .big{font-family:var(--font-bang);font-weight:400;letter-spacing:.02em;color:var(--ms-g)}
.ms .inbox li{background:var(--ms-slate-2)}
.ms .inbox li:hover{border-color:var(--ms-v)}
.ms .faq summary::after,.ms .faq a{color:var(--ms-g)}
.ms .final h2 span{color:var(--ms-g)}
.btn.slap{background:var(--ms-g);color:#101318}
.btn.slap:hover{background:#F6EE52}
.btn.viola{background:var(--ms-v);color:#fff}
.btn.viola:hover{background:#B9349F}

/* gocce: bordo superiore delle sezioni, come il logo che cola */
.drip{position:absolute;left:0;right:0;top:-1px;height:44px;width:100%;color:var(--ab-ink);pointer-events:none}
.sec-slate{background:var(--ms-slate-2)}
.sec-slate>.drip{color:var(--ab-ink)}
.sec-night>.drip{color:var(--ms-slate-2)}

/* bagliore psichedelico (il retro delle carte sfocato) */
.psiche{position:absolute;inset:-10%;background:url(../assets/img/mad-spliff/psiche.webp) center/cover no-repeat;opacity:.9;filter:saturate(1.6);pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 100%);mask-image:radial-gradient(closest-side,#000 30%,transparent 100%);animation:breathe 14s ease-in-out infinite alternate}
@keyframes breathe{from{transform:scale(1) rotate(0deg)}to{transform:scale(1.12) rotate(8deg)}}

/* ---------- hero ---------- */
.ms-hero{position:relative;min-height:min(100svh,1000px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:calc(104px + env(safe-area-inset-top,0px)) var(--gutter) clamp(170px,20vw,230px);overflow:hidden;text-align:center}
.ms-hero>*:not(.psiche):not(.fan):not(.tagwall){position:relative;z-index:2}
.ms-logo{width:min(720px,88vw,62svh);transform:translateY(var(--y,0)) scale(var(--s,1));will-change:transform}
.ms-logo img{width:100%;height:auto;filter:drop-shadow(0 18px 0 rgba(0,0,0,.35)) drop-shadow(0 30px 40px rgba(0,0,0,.6));animation:wobble 6s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-1.5deg) translateY(0)}50%{transform:rotate(1.5deg) translateY(-8px)}}
.ms-slogan{width:min(280px,56vw,24svh);margin-top:-6px;transform:rotate(-5deg)}
.ms-hero .row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.tagwall{position:absolute;right:-4%;top:18%;width:min(560px,60vw);opacity:.08;transform:rotate(-12deg);pointer-events:none;z-index:1}
.fan{position:absolute;left:50%;bottom:0;width:0;height:0;z-index:1;pointer-events:none}
.fan img{position:absolute;left:0;max-width:none;height:auto;bottom:calc(-1 * clamp(120px,15vw,190px));width:clamp(130px,15vw,190px);border-radius:10px;box-shadow:0 20px 40px rgba(0,0,0,.6);
  transform-origin:50% 140%;transform:translateX(-50%) rotate(calc(var(--k) * (8deg + var(--f,0) * 9deg))) translateY(calc(var(--f,0) * -30px));transition:transform .2s linear}

/* ---------- semi ---------- */
.suits{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0;list-style:none}
.suits li{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--chalk-2)}
.suits i{width:14px;height:14px;border-radius:50%;display:block}
.suits .r{background:var(--ms-r)}.suits .g{background:var(--ms-g)}.suits .b{background:var(--ms-b)}.suits .v{background:var(--ms-v)}

/* ---------- guida alle carte ---------- */
.guide{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;max-width:var(--max);margin:0 auto;padding:0;list-style:none}
.guide>li{min-width:0;display:flex;flex-direction:column;gap:12px;padding:18px;background:var(--ab-ink);border:1px solid var(--ab-line);border-radius:12px;transition:transform .4s var(--ease),border-color .3s}
.guide>li:hover{transform:translateY(-6px)}
.guide>li.wide{grid-column:span 2}
.guide .pics{display:flex;justify-content:center;gap:10px;height:200px;align-items:flex-end}
.guide .pics img{height:100%;width:auto;border-radius:8px;box-shadow:0 14px 24px rgba(0,0,0,.55);transition:transform .5s var(--ease)}
.guide .pics img:nth-child(1){transform:rotate(-4deg)}.guide .pics img:nth-child(2){transform:rotate(4deg)}
.guide>li:hover .pics img{transform:rotate(0) translateY(-6px)}
.guide .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
.guide h3{margin:0;font-family:var(--font-bang);font-weight:400;font-size:30px;letter-spacing:.03em;line-height:1}
.guide p{margin:0;font-size:16px;color:var(--chalk-2)}
.guide .split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.guide .split>div{display:flex;flex-direction:column;gap:6px}
.dot{display:inline-flex;gap:4px;vertical-align:middle;margin-right:6px}
.dot i{width:10px;height:10px;border-radius:50%;display:block}
.dot .r{background:var(--ms-r)}.dot .g{background:var(--ms-g)}.dot .b{background:var(--ms-b)}.dot .v{background:var(--ms-v)}
.guide .pari{border-top:4px solid var(--ms-g)}.guide .asso{border-top:4px solid var(--ms-r)}
.guide .tre{border-top:4px solid var(--ms-b)}.guide .cinque{border-top:4px solid var(--ms-v)}
.guide .sette{border-top:4px solid var(--ms-r)}.guide .nove{border-top:4px solid var(--ms-b)}
.guide .sbirro{border-top:4px solid var(--ms-sbirro)}.guide .jolly{border-top:4px solid var(--ms-jolly)}
.guide .sbirro:hover{border-color:var(--ms-sbirro)}.guide .jolly:hover{border-color:var(--ms-jolly)}

/* ---------- gira una carta ---------- */
.flip-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);max-width:var(--max);margin:0 auto;align-items:center}
.ms .deck{width:min(320px,74vw);aspect-ratio:650/1004}
.ms .deck .stack{border-radius:16px;background:#0b0d10;box-shadow:5px 5px 0 #08090b,10px 10px 0 #060708,0 30px 50px rgba(0,0,0,.6)}
.ms .card{cursor:pointer}
.ms .card .face{border-radius:16px;background:#111}
/* le immagini sono le carte vere: niente filigrana storta e trasparente di The Afterbluss */
.ms .card .face img,.ms .card .front img,.ms .card .back img{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block;transform:none;opacity:1}
.ms .card .front{padding:0;transform:rotateY(180deg)}
.ms .card.busted .front{animation:busted .7s var(--ease)}
@keyframes busted{0%,100%{filter:none}30%{filter:hue-rotate(180deg) saturate(2)}60%{filter:none}80%{filter:hue-rotate(180deg) saturate(2)}}
.ms-panel{display:flex;flex-direction:column;gap:18px;padding:clamp(20px,3vw,32px);background:var(--ab-ink);border:1px solid var(--ab-line);border-radius:12px}
.ms-panel .name{font-family:var(--font-bang);font-size:clamp(34px,4vw,48px);line-height:1;letter-spacing:.03em;min-height:1em}
.ms-panel .eff{margin:0;min-height:4.6em;color:var(--chalk-2);font-size:18px}
.ms-panel .row{display:flex;flex-wrap:wrap;gap:10px}
.ms-panel .stats b{font-family:var(--font-bang);font-weight:400;font-size:32px;letter-spacing:.02em}
.cops{display:flex;gap:6px;margin-top:4px}
.cops i{width:22px;height:30px;border-radius:4px;border:2px dashed #4a5563;display:block}
.cops i.on{border:0;background:var(--ms-sbirro) url(../assets/img/mad-spliff/carte/sbirro.webp) center 18%/220% auto}
.ms-panel .note{font-size:13px;color:var(--smoke);margin:0}
.ms-panel.out{border-color:var(--ms-r);box-shadow:0 0 0 1px var(--ms-r),0 0 40px rgba(226,48,47,.25)}

/* ---------- scatola ---------- */
.ms .inbox .pic{height:190px}
.ms .inbox .pic img{max-height:190px;border-radius:8px}
.ms .inbox li.bring{background:transparent;border-style:dashed}
.ms .inbox li.bring .pic img{opacity:.85;border-radius:0;filter:none}
.boxshot{max-width:var(--max);margin:0 auto 18px;border-radius:12px;overflow:hidden;border:1px solid var(--ab-line);position:relative}
.boxshot img{width:100%;height:clamp(260px,42vw,520px);object-fit:cover;object-position:50% 55%}
.boxshot figcaption{position:absolute;left:16px;bottom:14px;padding:6px 12px;background:rgba(16,19,24,.8);border-radius:6px;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--chalk-2)}

/* ---------- note legali ---------- */
.legal-note{max-width:900px;margin:36px auto 0;padding:18px 20px;border:1px dashed #3a434f;border-radius:10px;color:var(--smoke);font-size:15px}

.ms .section>.drip,.ms .section>.psiche,.ms .section>.tagwall{position:absolute}
.ms .final .psiche{opacity:.35}
.ms .final .tagwall{left:50%;right:auto;top:auto;bottom:6%;transform:translateX(-50%) rotate(-6deg);opacity:.06;width:min(900px,90vw)}

@media (max-width:1000px){.guide{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.flip-wrap{grid-template-columns:1fr}}
@media (max-width:560px){
  .guide{grid-template-columns:1fr}.guide>li.wide{grid-column:auto}
  .guide .pics{height:170px}
  .tagwall{width:90vw;top:12%}
}
@media (prefers-reduced-motion:reduce){.ms-logo img,.psiche{animation:none}.fan img{transition:none}}