/* ---------- scelta squadra ---------- */
.b-head{padding:12px 0 0}
.b-rules{list-style:none;margin:12px 0 0;padding:14px;background:#fff;border:3px solid var(--ink);border-radius:20px;box-shadow:0 4px 0 var(--ink);
  display:flex;flex-direction:column;gap:10px;font-size:15px;color:#26314f;line-height:1.35}
.b-rules b{color:var(--ink)}
.b-rules li{display:flex;gap:10px}
.b-rules .i{flex:0 0 24px;text-align:center;font-size:18px}
.b-lock{text-align:center;margin-top:26px;color:var(--muted);font-size:17px}
.b-lock .big{font-size:56px}
.b-lock .meter{margin:12px auto 18px;width:70%;height:16px;border-radius:99px;background:#fff;border:3px solid var(--ink);overflow:hidden}
.b-lock .meter i{display:block;height:100%;background:var(--sun)}
.b-bar{display:flex;align-items:center;justify-content:space-between;margin:20px 0 4px}
.b-bar .n{font-weight:700;font-size:18px}
.b-bar .n b{color:var(--coral)}
.b-bar .link-btn{color:var(--coral);font-weight:700;padding:6px 0}
.pick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 14px;padding-top:8px}
@media(min-width:520px){.pick-grid{grid-template-columns:repeat(3,1fr)}}
.pick-grid .card{cursor:pointer;transition:transform .15s}
.pick-grid .card.sel{outline:5px solid var(--coral);outline-offset:3px;transform:translateY(-4px)}
.pick-grid .card.sel::after{content:"✔";position:absolute;top:3cqw;left:4cqw;z-index:6;width:14cqw;height:14cqw;border-radius:50%;
  display:grid;place-items:center;background:var(--coral);color:#fff;border:.9cqw solid var(--ink);font-weight:700;font-size:8cqw}
.b-start{position:sticky;bottom:calc(96px + env(safe-area-inset-bottom));z-index:6;margin-top:16px}
.b-start .big-btn{width:100%}

/* ---------- DUELLO: tappetino ---------- */
#duel{--cw:min(calc(25 * var(--u)),12.5vh);--hw:min(calc(23 * var(--u)),11.5vh);overflow:hidden;color:var(--ink);
  background:radial-gradient(60px 30px at 14% 10%,#fff 98%,transparent),radial-gradient(80px 34px at 86% 7%,#fff 98%,transparent),
    linear-gradient(#aee4ff,#d8f2ff 40%,#fff7e6)}
.d-top{display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) 12px 4px;gap:8px;position:relative;z-index:3}
.d-x{width:40px;height:40px;border-radius:12px;background:#fff;border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);font-weight:700;font-size:18px}
.d-round{font-weight:700;font-size:18px;background:var(--sun);border:3px solid var(--ink);border-radius:99px;padding:3px 14px;box-shadow:0 3px 0 var(--ink)}
.d-score{display:flex;gap:10px;font-weight:700;font-size:14px}
.d-score>span{background:#fff;border:3px solid var(--ink);border-radius:99px;padding:2px 10px;display:flex;gap:4px;align-items:center}
.pips{color:var(--coral);letter-spacing:1px}

.opp-hand{position:relative;height:50px;margin:-2px 0 0;overflow:hidden;pointer-events:none}
.opp-hand .back{position:absolute;top:-34px;left:50%;width:54px;margin-left:-27px;transform-origin:50% -60%}
.back{aspect-ratio:5/7;border-radius:10px;border:3px solid var(--ink);display:grid;place-items:center;font-weight:700;color:#fff;font-size:30px;
  background:repeating-linear-gradient(45deg,#ff8a80 0 9px,#ff6b6b 9px 18px);box-shadow:inset 0 0 0 3px #fff}
.back.alt{background:repeating-linear-gradient(45deg,#7cc8ff 0 9px,#4cc9f0 9px 18px)}

.arena{flex:1;min-height:0;margin:2px 10px calc(10px + env(safe-area-inset-bottom));border-radius:28px;border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.28) 0 54px,transparent 55px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 40px,transparent 40px 80px),
    linear-gradient(#69e6bd,#35cc9c);
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:10px 8px;position:relative;overflow:hidden}
.arena::before{content:"";position:absolute;left:12px;right:12px;top:50%;height:4px;margin-top:-2px;background:rgba(255,255,255,.55);border-radius:4px}
.zone{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.zone .tag-z{font-size:11px;font-weight:700;letter-spacing:1.5px;color:rgba(31,42,68,.55);text-transform:uppercase}
.field{display:flex;justify-content:center;gap:10px;transition:transform .22s ease-out}
.field .card,.field .slot,.field .back{width:var(--cw);flex:0 0 auto}
.field.n2 .card,.field.n2 .slot,.field.n2 .back{width:calc(var(--cw) * .9)}
.field .back{font-size:34px}
.slot{aspect-ratio:5/7;border-radius:14px;border:3px dashed rgba(255,255,255,.85);background:rgba(255,255,255,.18);
  display:grid;place-items:center;color:rgba(255,255,255,.9);font-size:26px;font-weight:700}
.field .card.deal{animation:deal .35s cubic-bezier(.2,1.2,.4,1)}
@keyframes deal{from{transform:translateY(60px) scale(.8) rotate(-6deg);opacity:0}}
.field .flip{animation:flipin .5s ease-out}
@keyframes flipin{from{transform:rotateY(90deg) scale(1.1)}}
.side-me .field.lunge,.zone.me .field.lunge{transform:translateY(-22px) scale(1.07)}
.zone.cpu .field.lunge{transform:translateY(22px) scale(1.07)}
.field.hit{animation:hit .4s}
@keyframes hit{20%{transform:translateX(-8px);filter:brightness(1.7) saturate(2)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}

.hpbox{width:min(82%,300px);transition:opacity .3s}
.hpbox.off{visibility:hidden}
.hpbar{height:16px;border-radius:99px;background:#fff;border:3px solid var(--ink);overflow:hidden}
.hpbar i{display:block;height:100%;width:100%;background:var(--mint);transition:width .5s ease,background .3s}
.hpbar i.low{background:var(--orange)}
.hpbar i.crit{background:var(--coral)}
.hptxt{display:flex;justify-content:space-between;font-size:13px;color:var(--ink);margin-top:2px;font-weight:700}
.hptxt b{font-weight:700}

.mid{position:relative;z-index:2;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.need-chip{background:#fff;border:3px solid var(--ink);border-radius:99px;padding:5px 16px;font-weight:700;font-size:17px;box-shadow:0 3px 0 var(--ink)}
.need-chip b{color:var(--coral);font-size:21px}
.hint{font-size:12.5px;font-weight:600;color:#26314f;background:rgba(255,255,255,.7);border-radius:99px;padding:1px 10px}
.need-chip small{color:var(--muted);font-weight:600;margin-left:6px}
.go{font-size:22px;padding:12px 30px;background:linear-gradient(#ff8a80,var(--coral));color:#fff;animation:pulse 1s ease-in-out infinite;
  text-shadow:0 2px 0 rgba(31,42,68,.45)}
@keyframes pulse{50%{transform:scale(1.06)}}
.d-log{font-weight:700;font-size:20px;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:99px;padding:4px 18px;min-height:38px;box-shadow:0 3px 0 var(--ink)}
.banner{font-weight:700;font-size:34px;letter-spacing:1px;padding:4px 22px;border:3px solid var(--ink);border-radius:18px;box-shadow:0 5px 0 var(--ink);
  animation:pop .45s cubic-bezier(.2,1.4,.4,1);transform:rotate(-2deg)}
.banner.win{background:var(--sun)}.banner.lose{background:#cfd8ee}
@keyframes pop{from{transform:scale(.5) rotate(-12deg);opacity:0}}
.dmg{position:absolute;left:50%;top:10%;z-index:9;font-weight:700;font-size:46px;color:#fff;transform:translateX(-50%);
  -webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink);pointer-events:none;animation:dmgup 1.1s ease-out forwards}
.dmg.crit{font-size:62px;color:var(--sun);-webkit-text-stroke:3px var(--ink)}
@keyframes dmgup{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}20%{opacity:1;transform:translate(-50%,-6px) scale(1.25)}100%{opacity:0;transform:translate(-50%,-64px) scale(1)}}

/* ---------- mano di carte a ventaglio ---------- */
.hand-wrap{position:relative;flex:0 0 auto;height:calc(var(--hw) * 1.4 + 44px + env(safe-area-inset-bottom));margin-top:4px;transition:transform .45s cubic-bezier(.5,0,.3,1),height .45s;
  padding-bottom:env(safe-area-inset-bottom)}
.hand-wrap.away{height:0;overflow:hidden;visibility:hidden;margin:0;padding:0}
.hand{position:absolute;inset:0;overflow:visible}
.hand .card{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom));left:50%;width:var(--hw);margin-left:calc(var(--hw) / -2);transform-origin:50% 160%;
  transition:transform .18s ease-out;touch-action:none;cursor:pointer;animation:none}
.hand .card.lift{z-index:50!important}
.hand-empty{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;color:var(--muted)}
.hand-note{text-align:center;font-size:12px;color:var(--muted);font-weight:600;padding:0 0 calc(4px + env(safe-area-inset-bottom))}

.final{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center}
.final .em{font-size:96px;animation:pop .6s cubic-bezier(.2,1.4,.4,1)}
.final h1{margin:0;font-size:46px;letter-spacing:2px;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink)}
.final.win h1{color:var(--sun)}.final.lose h1{color:#cfd8ee}
.final .sc{font-weight:700;font-size:20px;margin-bottom:14px}
.final .big-btn{width:100%;max-width:320px}
.rewards{width:100%;max-width:340px;background:#fff;border:3px solid var(--ink);border-radius:20px;box-shadow:0 5px 0 var(--ink);padding:12px 14px;margin-bottom:10px;text-align:left}
.rw-coins{text-align:center;font-size:34px;font-weight:700;color:var(--ink);animation:pop .6s .2s cubic-bezier(.2,1.4,.4,1) both}
.rewards ul{list-style:none;margin:6px 0 0;padding:0}
.rw-parts li{display:flex;justify-content:space-between;font-size:15px;font-weight:600;padding:2px 0}
.rw-cats{border-top:2px dashed rgba(31,42,68,.25);padding-top:6px}
.rw-cats li{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;padding:3px 0}
.rw-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw-xp{color:#1783b8}
.rw-lv{color:var(--muted);min-width:46px;text-align:right}
.rw-up{background:var(--sun);border:2px solid var(--ink);border-radius:99px;padding:0 8px;font-weight:700;animation:pop .5s .5s both}