/* GIOCO (stilizzato dal v7) */
.panel{border:1px solid rgba(86,167,255,.15);background:rgba(9,28,68,.72);
  border-radius:24px;padding:16px;backdrop-filter:blur(20px)}
.game-scroll{height:100%;overflow-y:auto;overflow-x:hidden;
  padding:12px;scrollbar-width:none;display:flex;gap:14px}
.game-scroll::-webkit-scrollbar{display:none}
:root{
  --bg:#04122d;
  --navy:#061a42;
  --gold:#ffd34d;
  --gold2:#f7b500;
  --blue:#1f6fff;
  --blue-soft:#56a7ff;
  --txt:#f7fbff;
  --muted:rgba(226,239,255,0.64);
  --panel:rgba(9,28,68,0.72);
  --border:rgba(255,211,77,0.2);
  --border-b:rgba(86,167,255,0.18);
  --success:#9ee6a8;
  --danger:#ff7676;
  --shadow-gold:0 0 40px rgba(255,211,77,0.15);
  --shadow:0 20px 60px rgba(0,0,0,0.5);
  --r:20px;
  --r-lg:28px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100vh;background:
  radial-gradient(ellipse at 10% 0%,rgba(255,211,77,0.16),transparent 40%),
  radial-gradient(ellipse at 90% 10%,rgba(31,111,255,0.22),transparent 35%),
  radial-gradient(ellipse at 50% 100%,rgba(86,167,255,0.08),transparent 40%),
  linear-gradient(180deg,#061a42 0%,#04122d 55%,#020b1f 100%);
  color:var(--txt);font-family:'DM Sans',system-ui,sans-serif;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,0.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.022) 1px,transparent 1px);
  background-size:44px 44px;mask-image:linear-gradient(to bottom,rgba(0,0,0,0.7),transparent 65%)}
button,select{font-family:inherit}

.app{position:relative;z-index:1;width:min(1400px,calc(100% - 28px));min-height:100vh;margin:0 auto;padding:24px 0 60px}

/* TOPBAR */
.topbar{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:start;margin-bottom:20px}
.eyebrow{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:rgba(255,211,77,0.08);color:#ffe8a3;padding:6px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.22em;font-size:10px;font-weight:700;font-family:'Syne',sans-serif;margin-bottom:10px;animation:fadeUp .5s ease both}
h1{font-family:'Syne',sans-serif;font-size:clamp(38px,6vw,76px);line-height:.9;letter-spacing:-.06em;font-weight:800;animation:fadeUp .5s .06s ease both}
h1 .gold{color:var(--gold);text-shadow:0 0 28px rgba(255,211,77,0.25)}
.intro{color:var(--muted);font-size:14px;line-height:1.55;max-width:560px;margin-top:8px;animation:fadeUp .5s .12s ease both}

/* MODE SELECTOR */
.mode-bar{display:flex;gap:8px;margin-top:12px;animation:fadeUp .5s .18s ease both}
.mode-btn{border:1px solid var(--border-b);background:rgba(31,111,255,0.07);color:var(--muted);border-radius:999px;padding:7px 14px;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:.06em}
.mode-btn.active{background:var(--gold);color:#0a1428;border-color:var(--gold);box-shadow:0 0 18px rgba(255,211,77,0.22)}
.mode-btn:hover:not(.active){background:rgba(31,111,255,0.14);color:var(--txt)}

/* HUD */
.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;min-width:280px;animation:fadeUp .5s .2s ease both}
.hud-card{border:1px solid var(--border-b);background:var(--panel);border-radius:var(--r);padding:10px 13px;backdrop-filter:blur(14px)}
.hud-label{color:rgba(255,232,163,.72);text-transform:uppercase;letter-spacing:.15em;font-size:9px;font-weight:700;margin-bottom:4px;font-family:'Syne',sans-serif}
.hud-value{font-size:22px;font-weight:800;letter-spacing:-.04em;line-height:1;font-family:'Syne',sans-serif}
.hud-value.gold{color:var(--gold)}

/* LAYOUT */
.layout{display:grid;grid-template-columns:1.18fr 0.82fr;gap:16px;align-items:start}
.panel{border:1px solid var(--border-b);background:var(--panel);border-radius:var(--r-lg);padding:18px;backdrop-filter:blur(20px)}

/* VERSUS */
.versus{display:grid;grid-template-columns:1fr 60px 1fr;gap:10px;align-items:stretch;margin-bottom:14px}
.actor-card{position:relative;min-height:200px;overflow:hidden;border-radius:22px;border:1px solid var(--border-b);background:linear-gradient(135deg,#091d4a,#06122e);transition:all .3s ease}
.actor-card.active{border-color:rgba(255,211,77,.5);box-shadow:var(--shadow-gold);transform:translateY(-3px) scale(1.01)}
.actor-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.65;filter:saturate(.8) contrast(1.1);transform:scale(1.03);transition:transform .5s ease}
.actor-card:hover img{transform:scale(1.09)}
.actor-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,18,45,.97) 30%,rgba(4,18,45,.3) 70%,transparent)}
.actor-info{position:absolute;z-index:1;left:14px;right:14px;bottom:14px}
.actor-kicker{color:var(--gold);text-transform:uppercase;letter-spacing:.2em;font-size:9px;font-weight:700;font-family:'Syne',sans-serif}
.actor-name{font-family:'Syne',sans-serif;font-size:clamp(15px,2.2vw,22px);line-height:.95;font-weight:800;letter-spacing:-.04em;margin:4px 0 2px}
.actor-role{color:var(--muted);font-size:11px}
.bridge-icon{display:flex;align-items:center;justify-content:center}
.pulse{width:50px;height:50px;border-radius:999px;display:grid;place-items:center;border:1px solid rgba(255,211,77,.3);background:rgba(255,211,77,.09);font-size:20px;animation:pulse 2s ease-in-out infinite;font-family:'Syne',sans-serif;font-weight:800;color:var(--gold)}

/* GAME BOX */
.game-box{border:1px solid rgba(255,211,77,.14);background:rgba(2,9,21,.3);border-radius:var(--r-lg);padding:14px}
.game-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;gap:10px;flex-wrap:wrap}
.slabel{color:rgba(255,232,163,.7);text-transform:uppercase;letter-spacing:.18em;font-size:9px;font-weight:700;font-family:'Syne',sans-serif;margin-bottom:3px}
.current-actor{font-family:'Syne',sans-serif;font-size:clamp(18px,3vw,30px);line-height:1;letter-spacing:-.045em;font-weight:800;transition:opacity .2s,transform .2s}
.actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.btn{border:1px solid var(--border-b);border-radius:999px;padding:8px 13px;color:var(--txt);background:rgba(86,167,255,.07);cursor:pointer;font-weight:700;font-size:12px;transition:all .2s;font-family:'DM Sans',sans-serif}
.btn:hover{transform:translateY(-1px);background:rgba(86,167,255,.14)}
.btn.gold{border-color:rgba(255,211,77,.35);background:rgba(255,211,77,.1);color:#ffe8a3}
.btn.gold:hover{background:rgba(255,211,77,.18)}
.btn.primary{background:var(--gold);color:#0a1428;border-color:transparent;font-weight:800}
.btn.primary:hover{background:#ffe066;transform:translateY(-1px)}
.btn:disabled{opacity:.38;cursor:not-allowed;transform:none}
.btn.danger{border-color:rgba(255,118,118,.3);background:rgba(255,118,118,.08);color:#ffd5d5}

/* MESSAGES */
.msg{display:none;margin-bottom:12px;padding:10px 13px;border-radius:16px;line-height:1.45;font-size:13px;animation:fadeUp .25s ease both}
.msg.vis{display:block}
.msg.err{border:1px solid rgba(255,118,118,.35);background:rgba(255,118,118,.1);color:#ffd5d5}
.msg.ok{border:1px solid rgba(158,230,168,.35);background:rgba(158,230,168,.09);color:#e4ffe8}
.msg.hint{border:1px solid rgba(255,211,77,.28);background:rgba(255,211,77,.09);color:#fff4c8}

/* SELECTION */
.sel-box{display:grid;gap:12px}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{border:1px solid var(--border-b);background:rgba(255,255,255,.03);border-radius:18px;padding:12px}
.field label{display:block;color:rgba(255,232,163,.7);text-transform:uppercase;letter-spacing:.14em;font-size:9px;font-weight:700;font-family:'Syne',sans-serif;margin-bottom:8px}
.sw{position:relative}
select{width:100%;appearance:none;border:1px solid rgba(86,167,255,.18);background:rgba(2,9,21,.5);color:var(--txt);border-radius:14px;padding:10px 36px 10px 12px;outline:none;cursor:pointer;font-weight:600;font-size:13px;font-family:'DM Sans',sans-serif;transition:border-color .2s}
select:focus{border-color:rgba(255,211,77,.5)}
.sw::after{content:"⌄";position:absolute;right:12px;top:50%;transform:translateY(-60%);color:var(--gold);pointer-events:none;font-size:17px;line-height:1}

/* PREVIEW */
.preview{display:none;grid-template-columns:80px 1fr;gap:11px;border:1px solid rgba(255,211,77,.18);background:rgba(255,211,77,.055);border-radius:18px;padding:11px;animation:fadeUp .25s ease both}
.preview.vis{display:grid}
.poster{height:112px;overflow:hidden;border-radius:12px;background:#0a1428}
.poster img{width:100%;height:100%;object-fit:cover}
.movie-title-p{font-family:'Syne',sans-serif;font-size:16px;line-height:1.05;font-weight:800;letter-spacing:-.03em;margin:2px 0 4px}
.movie-year-p{color:var(--muted);font-size:12px;margin-bottom:8px}
.guess-line{color:rgba(247,251,255,.76);font-size:13px;line-height:1.4;margin-bottom:8px}
.pill{display:inline-flex;align-items:center;border:1px solid var(--border-b);background:rgba(0,0,0,.22);color:rgba(247,251,255,.7);border-radius:999px;padding:3px 9px;font-size:11px;font-weight:600}

/* CONFIRM ROW */
.conf-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.07);padding-top:12px}
.conf-txt{color:rgba(247,251,255,.58);font-size:12px;line-height:1.4}

/* PATH */
.path-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.path-head h2{font-family:'Syne',sans-serif;font-size:20px;letter-spacing:-.04em;font-weight:800;margin-top:2px}
.step-ctr{border:1px solid var(--border-b);border-radius:999px;padding:5px 11px;color:var(--muted);background:rgba(0,0,0,.22);font-size:12px;white-space:nowrap}
.empty{border:1px dashed rgba(86,167,255,.18);background:rgba(0,0,0,.2);border-radius:18px;padding:22px;text-align:center;color:var(--muted);line-height:1.55;font-size:13px}
.path-list{display:grid;gap:10px}
.path-step{display:grid;grid-template-columns:52px 1fr;gap:10px;border:1px solid var(--border-b);background:rgba(2,9,21,.28);padding:9px;border-radius:18px;animation:slideIn .3s ease both}
.path-step img{width:52px;height:74px;object-fit:cover;border-radius:10px}
.step-no{color:var(--muted);font-size:10px;font-family:'Syne',sans-serif;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1px}
.path-movie{font-family:'Syne',sans-serif;font-weight:800;margin-bottom:3px;line-height:1.1;font-size:13px}
.path-actors{color:rgba(247,251,255,.68);font-size:12px;line-height:1.3;margin-bottom:5px}

/* CHALLENGES BAR */







/* RESULT */
.result{display:none;border:1px solid rgba(255,211,77,.28);background:rgba(255,211,77,.08);border-radius:var(--r-lg);padding:24px;text-align:center;animation:popIn .4s ease both}
.result.vis{display:block}
.trophy{width:64px;height:64px;margin:0 auto 12px;display:grid;place-items:center;border-radius:999px;background:rgba(255,211,77,.12);border:1px solid rgba(255,211,77,.25);font-size:28px;animation:trophyAnim 1.6s ease infinite}
.result h2{font-family:'Syne',sans-serif;margin:0 0 8px;font-size:clamp(26px,4vw,44px);letter-spacing:-.055em;font-weight:800}
.result p{margin:0 auto 16px;max-width:400px;color:var(--muted);line-height:1.5;font-size:14px}
.result-scores{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.rscore{border:1px solid var(--border-b);background:rgba(0,0,0,.28);border-radius:16px;padding:12px}
.rscore .val{font-family:'Syne',sans-serif;font-size:32px;font-weight:800;letter-spacing:-.05em;color:var(--gold);line-height:1}
.rscore .lbl{color:var(--muted);font-size:11px;margin-top:2px;text-transform:uppercase;letter-spacing:.14em;font-size:9px;font-weight:700;font-family:'Syne',sans-serif}
.popcorn-reward{border:1px solid rgba(255,211,77,.28);background:rgba(255,211,77,.1);border-radius:18px;padding:12px 16px;margin:14px 0;display:flex;align-items:center;gap:12px;font-size:14px;color:#fff4c8}
.popcorn-reward strong{font-family:'Syne',sans-serif;font-size:24px;font-weight:800;color:var(--gold)}

/* TMDB NOTICE */
.tmdb-note{margin-top:24px;text-align:center;color:rgba(226,239,255,.32);font-size:10px;letter-spacing:.06em}
.tmdb-note a{color:rgba(255,211,77,.5);text-decoration:none}
.tmdb-note a:hover{color:var(--gold)}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
@keyframes popIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.09);opacity:1}}
@keyframes trophyAnim{0%,100%{transform:rotate(0)scale(1)}25%{transform:rotate(-6deg)scale(1.04)}50%{transform:rotate(6deg)scale(1.09)}75%{transform:rotate(0)scale(1.04)}}

/* RESPONSIVE */
@media(max-width:1080px){.topbar,.layout{grid-template-columns:1fr}.hud{grid-template-columns:repeat(4,1fr)}}
@media(max-width:680px){.app{padding:16px 0 50px}.hud{grid-template-columns:repeat(2,1fr)}.versus{grid-template-columns:1fr}.bridge-icon{display:none}.choice-grid{grid-template-columns:1fr}.result-scores{grid-template-columns:1fr}}

.prog-item{display:flex;flex-direction:column;align-items:center;gap:3px;opacity:.28;transition:all .35s ease}
.prog-item.on{opacity:1}
.prog-item.cur{opacity:1;transform:scale(1.18)}
.prog-item img{width:34px;height:34px;object-fit:contain}
.prog-item.cur img{filter:drop-shadow(0 0 7px rgba(255,211,77,.65))}
.prog-item span{font-size:8px;color:var(--muted);font-family:'Syne',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.prog-arrow{color:rgba(255,211,77,.28);font-size:12px;margin-bottom:14px}

.btn-home-back{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:14px;width:100%;
  border:1px solid rgba(86,167,255,.25);
  background:rgba(86,167,255,.1);color:#f7fbff;
  border-radius:999px;padding:12px 20px;
  font-family:'Syne',sans-serif;font-weight:800;font-size:14px;
  cursor:pointer;transition:all .2s ease;
}
.btn-home-back:hover{background:rgba(86,167,255,.2);transform:translateY(-1px)}
/* TOP BAR */
.topbar{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;padding:7px 10px 3px!important;flex-shrink:0!important;width:100%!important}
.settings-btn{background:none!important;border:none!important;padding:6px!important;cursor:pointer!important;flex-shrink:0!important;opacity:.85;transition:opacity .2s}
.settings-btn:active{opacity:.6!important}
.counters-group{display:flex!important;flex-direction:row!important;align-items:center!important;gap:4px!important;flex-shrink:0!important}
.counter{display:inline-flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:2px!important;position:relative!important;width:22vw!important;max-width:82px!important;min-width:62px!important;height:30px!important;padding:0 5px!important;font-family:'acumin-pro',sans-serif!important;font-weight:800!important;font-size:12px!important;color:#ffd34d!important;white-space:nowrap!important;flex-shrink:0!important}
.counter-bg{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:fill!important;z-index:0!important;border-radius:999px!important}
.counter img.ic{width:17px!important;height:17px!important;object-fit:contain!important;position:relative!important;z-index:1!important;flex-shrink:0!important}
.counter span{position:relative!important;z-index:1!important;letter-spacing:-.02em!important}
.plus{width:14px!important;height:14px!important;border-radius:999px!important;background:rgba(255,255,255,.22)!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:10px!important;font-weight:900!important;color:#fff!important;cursor:pointer!important;position:relative!important;z-index:1!important;flex-shrink:0!important;line-height:1!important}
.plus:active{background:rgba(255,255,255,.4)!important}


/* ═══════════════════════════════════════════════════════════
   ── SCREENPLAY — LAYOUT STEP-BY-STEP ──
   ═══════════════════════════════════════════════════════════ */

#screenPlay {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #061a42 0%, #04122d 55%, #020b1f 100%);
  position: relative;
  z-index: 1;
}

/* ── TOP AREA (logo + attori + percorso) ── */
.sp-top {
  flex-shrink: 0;
  padding: clamp(6px,1.5vh,14px) clamp(10px,3vw,20px) 0;
  background: linear-gradient(180deg,
    rgba(4,18,45,.98) 0%,
    rgba(4,18,45,.92) 70%,
    transparent 100%);
  border-bottom: 1px solid rgba(86,167,255,.12);
  z-index: 2;
}

.sp-logo-wrap {
  text-align: center;
  margin-bottom: 4px;
}
.sp-logo-wrap img {
  height: clamp(28px, 5vh, 44px);
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(255,211,77,.35));
}

.sp-start-lbl {
  text-align: center;
  font-family: 'acumin-pro','Syne', sans-serif;
  font-size: clamp(10px, 2vw, 13px);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
  text-shadow: 0 0 12px rgba(255,211,77,.4);
}

/* ── ATTORI: Start ↔ Target ── */
.sp-actors {
  display: flex;
  gap: clamp(8px,2vw,16px);
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}
.sp-abox {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(86,167,255,.22);
  border-radius: 14px;
  padding: clamp(5px,1.2vh,9px) clamp(8px,2vw,14px);
  background: rgba(4,18,45,.7);
  backdrop-filter: blur(8px);
  min-width: 0;
  flex: 1;
  max-width: 220px;
}
.sp-abox.sp-start { border-color: rgba(80,140,255,.45); }
.sp-abox.sp-target { border-color: rgba(255,80,80,.45); }

.sp-aphoto {
  width: clamp(36px,8vw,52px);
  height: clamp(36px,8vw,52px);
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255,211,77,.3);
  background: rgba(0,0,0,.3);
}
.sp-albl {
  font-size: clamp(8px,1.6vw,10px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: rgba(255,211,77,.7);
  font-family: 'acumin-pro','Syne', sans-serif;
  margin-bottom: 2px;
  white-space: nowrap;
}
.sp-aname {
  font-family: 'acumin-pro','Syne', sans-serif;
  font-size: clamp(11px,2.2vw,15px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── PERCORSO A○○○○○○B ── */
.sp-path {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 8px;
  padding: 0 4px;
  overflow: hidden;
}
.sp-pnode {
  width: clamp(22px,5vw,30px);
  height: clamp(22px,5vw,30px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(9px,2vw,12px);
  font-weight: 800;
  font-family: 'acumin-pro','Syne', sans-serif;
  flex-shrink: 0;
  transition: all .3s ease;
}
.sp-pnode.pa {
  background: rgba(80,140,255,.25);
  border: 2px solid rgba(80,140,255,.6);
  color: #80b0ff;
}
.sp-pnode.pb {
  background: rgba(255,80,80,.2);
  border: 2px solid rgba(255,80,80,.5);
  color: #ff8080;
}
.sp-pnode.pdot {
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.35);
  width: clamp(18px,4vw,24px);
  height: clamp(18px,4vw,24px);
  font-size: clamp(8px,1.8vw,11px);
}
.sp-pnode.pok {
  background: rgba(40,200,80,.2);
  border: 2px solid rgba(40,200,80,.6);
  color: #60e080;
}
.sp-pnode.pno {
  background: rgba(255,60,60,.18);
  border: 2px solid rgba(255,60,60,.5);
  color: #ff6060;
}
.sp-pline {
  height: 1.5px;
  flex: 1;
  background: rgba(255,255,255,.12);
  min-width: 6px;
  max-width: 28px;
}

/* ── AREA STEP SCROLLABILE ── */
.sp-steps {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(8px,1.5vh,14px) clamp(10px,3vw,18px);
  scrollbar-width: none;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-steps::-webkit-scrollbar { display: none; }

/* ── STEP CARD ── */
.sp-card {
  border: 1px solid rgba(86,167,255,.18);
  background: rgba(6,22,60,.82);
  border-radius: 16px;
  padding: clamp(10px,2vh,16px) clamp(10px,3vw,16px);
  animation: spIn .3s ease both;
  backdrop-filter: blur(10px);
}
.sp-card.locked {
  opacity: .5;
  pointer-events: none;
}
.sp-card-lbl {
  font-family: 'acumin-pro','Syne', sans-serif;
  font-size: clamp(8px,1.6vw,10px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: rgba(255,211,77,.7);
  margin-bottom: 6px;
}
@keyframes spIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── SELECT stilizzato ── */
.sp-sel {
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(2,9,25,.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='rgba(255,211,77,.6)'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size: auto, 10px;
  border: 1px solid rgba(86,167,255,.28);
  border-radius: 10px;
  color: #fff;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(12px,2.2vw,14px);
  padding: 10px 36px 10px 12px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-sel:focus {
  outline: none;
  border-color: rgba(255,211,77,.55);
  box-shadow: 0 0 0 2px rgba(255,211,77,.12);
}
.sp-sel option { background: #061a42; color: #fff; }
.sp-sel:disabled { opacity: .4; cursor: not-allowed; }

/* ── BOTTONI ── */
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  padding: clamp(8px,1.6vh,12px) clamp(14px,4vw,22px);
  font-family: 'acumin-pro','Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(12px,2.2vw,14px);
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}
.sp-btn.off {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.35);
  cursor: not-allowed;
}
.sp-btn.grn {
  background: linear-gradient(135deg, #ffd34d, #f7a800);
  color: #0a1428;
  box-shadow: 0 4px 16px rgba(255,211,77,.3);
}
.sp-btn.grn:active { transform: scale(.97); }
.sp-btn.red {
  background: linear-gradient(135deg, #e83030, #b81818);
  color: #fff;
  box-shadow: 0 4px 16px rgba(232,48,48,.3);
}
.sp-btn.red:active { transform: scale(.97); }

/* ── FEEDBACK (CORRETTO / SBAGLIATO) ── */
.sp-fb {
  border-radius: 14px;
  padding: clamp(14px,2.5vh,20px) clamp(14px,4vw,22px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  animation: spIn .3s ease both;
}
.sp-fb.ok  { background: rgba(30,200,80,.12);  border: 1px solid rgba(40,200,80,.35);  }
.sp-fb.err { background: rgba(232,48,48,.10);   border: 1px solid rgba(232,48,48,.35); }
.sp-fb-photo {
  width: clamp(40px,9vw,56px);
  height: clamp(40px,9vw,56px);
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255,211,77,.25);
}
.sp-fb-ttl {
  font-family: 'acumin-pro','Syne', sans-serif;
  font-size: clamp(18px,4vw,24px);
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.sp-fb-ttl.ok  { color: #60e090; text-shadow: 0 0 14px rgba(40,200,80,.4);  }
.sp-fb-ttl.err { color: #ff7070; text-shadow: 0 0 14px rgba(232,48,48,.4); }
.sp-fb-sub {
  font-size: clamp(11px,2vw,13px);
  color: rgba(226,239,255,.7);
  line-height: 1.4;
}
.sp-fb-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.sp-fb-msg {
  font-size: clamp(14px,3.2vw,17px);
  color: rgba(226,239,255,.8);
  line-height: 1.4;
}
.sp-fb-btn {
  flex: 1;
  min-width: 110px;
  border: none;
  border-radius: 999px;
  padding: clamp(10px,2vh,14px) 18px;
  font-family: 'acumin-pro','Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(15px,3.2vw,18px);
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.sp-fb-btn.grn {
  background: linear-gradient(135deg, #28c428, #1e9a10);
  color: #fff;
  box-shadow: 0 4px 14px rgba(40,180,30,.35);
}
.sp-fb-btn.red {
  background: linear-gradient(135deg, rgba(86,167,255,.2), rgba(60,120,220,.2));
  border: 1px solid rgba(86,167,255,.35);
  color: #a0c8ff;
}
.sp-fb-btn:active { transform: scale(.97); }

/* ── GAME OVER / WIN ── */
.sp-end {
  border-radius: 18px;
  padding: clamp(16px,3vh,24px) clamp(14px,4vw,22px);
  text-align: center;
  animation: spIn .4s ease both;
}
.sp-end.win  { background: rgba(255,211,77,.1);  border: 1px solid rgba(255,211,77,.3);  }
.sp-end.lose { background: rgba(232,48,48,.08);   border: 1px solid rgba(232,48,48,.28); }

.sp-end-icon { font-size: 40px; margin-bottom: 8px; }
.sp-end-ttl {
  font-family: 'acumin-pro','Syne', sans-serif;
  font-size: clamp(22px,5vw,32px);
  font-weight: 900;
  letter-spacing: -.03em;
  margin-bottom: 6px;
}
.sp-end.win  .sp-end-ttl { color: var(--gold); }
.sp-end.lose .sp-end-ttl { color: #ff7070; }
.sp-end-sub { color: rgba(226,239,255,.7); font-size: clamp(12px,2vw,14px); margin-bottom: 14px; line-height: 1.5; }
.sp-end-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sp-end-btn {
  border: none; border-radius: 999px;
  padding: 12px 22px;
  font-family: 'acumin-pro','Syne', sans-serif;
  font-weight: 800; font-size: 14px;
  cursor: pointer; transition: all .2s;
  white-space: nowrap;
}
.sp-end-btn.gold { background: linear-gradient(135deg,#ffd34d,#f7a800); color: #0a1428; box-shadow: 0 4px 16px rgba(255,211,77,.3); }
.sp-end-btn.home { background: rgba(86,167,255,.15); border: 1px solid rgba(86,167,255,.3); color: #a0c8ff; }
.sp-end-btn:active { transform: scale(.97); }


/* ═══════════════════════════════════════════════════════════
   ── RESPONSIVE GLOBALE MIGLIORATO ──
   ═══════════════════════════════════════════════════════════ */

/* Tutte le schermate: no overflow orizzontale */
.screen {
  position: fixed;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.screen.hidden { display: none !important; }

/* Home scroll */
.home-wrap  { height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.home-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(8px,2vh,16px) clamp(10px,3vw,20px);
  padding-bottom: calc(var(--nav-h) + var(--safe-bot) + 8px);
  scrollbar-width: none;
}
.home-scroll::-webkit-scrollbar { display: none; }

/* Modalità di Gioco */
.modes-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(8px,2vh,14px) clamp(10px,3vw,20px);
  padding-bottom: calc(var(--nav-h) + var(--safe-bot) + 8px);
  scrollbar-width: none;
}
.modes-scroll::-webkit-scrollbar { display: none; }
.modes-head  { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.modes-title {
  font-family: 'acumin-pro','Syne', sans-serif;
  font-size: clamp(18px,4vw,26px);
  font-weight: 900;
  color: #fff;
  flex: 1;
}
.modes-back  {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(86,167,255,.2);
  border-radius: 50%;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.modes-back img  { width: 20px; height: 20px; object-fit: contain; }
.modes-intro {
  font-size: clamp(12px,2vw,14px);
  color: rgba(226,239,255,.65);
  line-height: 1.6;
  margin-bottom: clamp(12px,2vh,20px);
}

/* Card modalità - no aspect-ratio rigido su mobile */
.mode-card { margin-bottom: clamp(8px,1.5vh,14px); }
.rcard-h   { min-height: clamp(80px,15vh,120px); }

/* Placeholder schermate */
.placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%;
  gap: 10px;
  padding: 20px;
  text-align: center;
}
.ph-icon  { font-size: clamp(40px,8vw,56px); }
.ph-title {
  font-family: 'acumin-pro','Syne', sans-serif;
  font-size: clamp(20px,4vw,28px);
  font-weight: 900;
  color: var(--gold);
}
.ph-sub { color: rgba(226,239,255,.6); font-size: clamp(12px,2vw,14px); line-height: 1.5; }

/* Nav bar */
.nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--nav-h) + var(--safe-bot));
  padding-bottom: var(--safe-bot);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 1000;
  overflow: hidden;
}
.nav-bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,12,35,.88) 0%, rgba(2,8,25,.96) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid rgba(86,167,255,.12);
}
.nav-btn {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  flex: 1;
  background: none; border: none;
  cursor: pointer;
  padding: 6px 0;
  color: rgba(226,239,255,.45);
  font-family: 'acumin-pro','Syne', sans-serif;
  font-size: clamp(7px,1.6vw,9px);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s;
}
.nav-btn.active { color: var(--gold); }
.nav-btn span   { font-size: clamp(8px,2vw,11px); display: block; }
.nav-icon { width: clamp(26px,6vw,34px); height: clamp(26px,6vw,34px); object-fit: contain; }
/* Icona rotta o non caricata: non occupa spazio inutile */
.nav-icon[src=""], .nav-icon:not([src]) { display: none; }
.nav-sep  { width: 1px; height: 26px; background: rgba(86,167,255,.12); flex-shrink: 0; }

/* Select globale: mai più largo dello schermo */
select {
  max-width: 100%;
  box-sizing: border-box;
}

/* ── TABLET (≤ 768px) ── */
@media (max-width: 768px) {
  .sp-actors { gap: 6px; }
  .sp-abox   { max-width: 160px; padding: 6px 8px; }
  .sp-aphoto { width: 34px; height: 34px; }

  .sp-top {
    padding: 6px 10px 0;
  }
  .sp-steps {
    padding: 8px 10px;
    gap: 8px;
  }

  /* Riduci card home su mobile */
  .grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

/* ── MOBILE PICCOLO (≤ 390px) ── */
@media (max-width: 390px) {
  .sp-aname { font-size: 13px; }
  .sp-albl  { font-size: 9px; }
  .sp-aphoto { width: 30px; height: 30px; }
  .sp-abox  { padding: 5px 6px; gap: 6px; }

  .sp-btn, .sp-fb-btn {
    font-size: 14px;
    padding: 10px 14px;
  }
  .sp-fb-actions { flex-direction: column; }
  .sp-fb-btn { min-width: unset; }

  /* Nav su schermi piccoli: icone più compatte, label visibili */
  .nav-btn      { padding: 6px 0; gap: 2px; }
  .nav-btn span { font-size: 7px; display: block; }
  .nav-icon     { width: 22px; height: 22px; }
  .nav-sep      { height: 18px; }
}

/* ── LANDSCAPE MOBILE ── */
@media (max-height: 500px) and (orientation: landscape) {
  .sp-logo-wrap   { display: none; }
  .sp-start-lbl   { margin-bottom: 2px; font-size: 9px; }
  .sp-aphoto      { width: 28px; height: 28px; }
  .sp-top         { padding: 4px 10px 0; }
  .sp-steps       { padding: 6px 10px; }
  .sp-card        { padding: 8px 12px; }
}

/* =========================================================
   STARBRIDGE — SFIDA CONFORM PATCH v1
   Obiettivo: riportare la schermata sfida vicino alla reference PSD:
   logo grande, sfondo cinema blu, box attori importanti, percorso leggibile,
   card scelta film larga e nav nascosta durante la partita.
   ========================================================= */
body.is-playing .ad-bar{display:none!important;}
body.is-playing #screenPlay{padding-bottom:calc(var(--nav-h, 88px) + var(--safe-bot, 0px) + 6px)!important;}

#screenPlay{
  height:100dvh!important;
  min-height:100dvh!important;
  overflow:hidden!important;
  background:
    radial-gradient(ellipse 85% 48% at 50% 56%,rgba(60,170,255,.55),rgba(18,80,150,.22) 36%,transparent 66%),
    radial-gradient(ellipse 70% 38% at 50% 46%,rgba(150,220,255,.28),transparent 58%),
    radial-gradient(ellipse 100% 70% at 50% 100%,rgba(9,35,70,.9),transparent 70%),
    linear-gradient(180deg,#020509 0%,#041021 18%,#082248 55%,#020509 100%)!important;
  isolation:isolate;
}
#screenPlay::before{
  content:"";
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 24%,rgba(190,230,255,.75) 0 1px,transparent 1.5px),
    radial-gradient(circle at 72% 31%,rgba(120,200,255,.6) 0 1px,transparent 1.5px),
    radial-gradient(circle at 48% 49%,rgba(255,255,255,.55) 0 1.3px,transparent 2px),
    radial-gradient(circle at 68% 67%,rgba(130,210,255,.45) 0 1px,transparent 2px),
    radial-gradient(circle at 34% 78%,rgba(255,255,255,.4) 0 1px,transparent 2px);
  background-size:86px 118px,124px 160px,156px 190px,210px 260px,180px 230px;
  opacity:.85;
}
#screenPlay::after{
  content:"";
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,transparent 18%,transparent 82%,rgba(0,0,0,.88) 100%),
             linear-gradient(180deg,rgba(0,0,0,.28) 0%,transparent 28%,rgba(0,0,0,.7) 100%);
}

.sp-top{
  padding:clamp(10px,2.2vh,24px) clamp(18px,5vw,34px) 0!important;
  background:transparent!important;
  border-bottom:0!important;
}
.sp-logo-wrap{padding:0!important;margin:0 0 clamp(8px,1.4vh,16px)!important;text-align:center!important;}
.sp-logo-wrap img{
  width:min(78vw,460px)!important;
  height:auto!important;
  max-height:clamp(72px,13vh,150px)!important;
  object-fit:contain!important;
  filter:drop-shadow(0 4px 0 rgba(0,45,110,.9)) drop-shadow(0 0 20px rgba(255,210,50,.38))!important;
}
.sp-start-lbl{
  font-size:clamp(24px,7.2vw,48px)!important;
  line-height:1!important;
  text-transform:none!important;
  letter-spacing:.02em!important;
  color:#ffcf28!important;
  text-shadow:0 4px 0 rgba(120,55,0,.75),0 0 15px rgba(255,210,55,.35)!important;
  margin:0 0 clamp(14px,2vh,24px)!important;
}

.sp-actors{
  gap:clamp(10px,5vw,48px)!important;
  justify-content:space-between!important;
  align-items:center!important;
  margin:0 auto clamp(18px,2.8vh,30px)!important;
  max-width:940px!important;
}
.sp-abox{
  flex:1 1 0!important;
  max-width:none!important;
  min-height:clamp(62px,9.6vh,92px)!important;
  border-radius:clamp(17px,3vw,28px)!important;
  border:3px solid #f6c13d!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 6px 16px rgba(0,0,0,.4)!important;
  padding:clamp(8px,1.4vh,14px) clamp(10px,2vw,18px)!important;
  gap:clamp(10px,2vw,18px)!important;
}
.sp-abox.sp-start{background:linear-gradient(90deg,rgba(5,35,75,.98),rgba(31,117,190,.92))!important;}
.sp-abox.sp-target{background:linear-gradient(90deg,rgba(235,38,55,.96),rgba(145,10,25,.95))!important;flex-direction:row-reverse!important;text-align:right!important;}
.sp-aphoto{
  width:clamp(56px,10.5vw,86px)!important;
  height:clamp(56px,10.5vw,86px)!important;
  border-radius:clamp(14px,2vw,24px)!important;
  border:2px solid #f6c13d!important;
  background:#02060d!important;
}
.sp-albl{
  font-size:clamp(13px,2.8vw,20px)!important;
  line-height:1!important;
  letter-spacing:.05em!important;
  color:#ffd34d!important;
  text-shadow:0 2px 0 rgba(0,0,0,.75)!important;
}
.sp-aname{
  font-size:clamp(19px,4.5vw,34px)!important;
  line-height:1.02!important;
  white-space:normal!important;
  color:#fff!important;
  text-shadow:0 2px 0 rgba(0,0,0,.75)!important;
}

.sp-path{
  width:min(86vw,680px)!important;
  margin:0 auto clamp(24px,3.4vh,42px)!important;
  padding:0!important;
  overflow:visible!important;
}
.sp-pnode{
  width:clamp(38px,7.3vw,58px)!important;
  height:clamp(38px,7.3vw,58px)!important;
  font-size:clamp(22px,4.5vw,36px)!important;
  border-radius:999px!important;
  box-shadow:0 0 18px rgba(255,255,255,.28)!important;
}
.sp-pnode.pa{background:#073365!important;border:3px solid #fff!important;color:#fff!important;box-shadow:0 0 18px rgba(80,170,255,.95)!important;}
.sp-pnode.pb{background:#9b0909!important;border:3px solid #fff!important;color:#fff!important;box-shadow:0 0 18px rgba(255,40,25,.95)!important;}
.sp-pnode.pdot{
  width:clamp(26px,4.7vw,38px)!important;
  height:clamp(26px,4.7vw,38px)!important;
  background:#f4f4f4!important;
  border:0!important;
  color:transparent!important;
  box-shadow:none!important;
}
.sp-pnode.pok{background:#fff!important;border:0!important;color:transparent!important;}
.sp-pnode.pno{background:#fff!important;border:0!important;color:transparent!important;}
.sp-pline{
  height:3px!important;
  min-width:12px!important;
  max-width:56px!important;
  background:repeating-linear-gradient(90deg,#fff 0 12px,transparent 12px 21px)!important;
  opacity:.96!important;
}

.sp-steps{
  flex:1!important;
  padding:0 clamp(18px,5vw,34px) clamp(18px,3vh,30px)!important;
  gap:clamp(14px,2vh,22px)!important;
}
.sp-card{
  width:min(100%,940px)!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:clamp(56px,12vw,110px) minmax(0,1fr)!important;
  align-items:center!important;
  gap:clamp(14px,3vw,28px)!important;
  border-radius:clamp(18px,3vw,28px)!important;
  border:3px solid #f6c13d!important;
  background:rgba(2,26,64,.86)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 10px 26px rgba(0,0,0,.42)!important;
  padding:clamp(18px,3vh,32px) clamp(18px,4vw,34px)!important;
}
.sp-card-icon{
  font-size:clamp(48px,13vw,96px)!important;
  line-height:1!important;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.5));
  transform:rotate(-4deg);
}
.sp-card-title{
  font-size:clamp(19px,4.8vw,36px)!important;
  line-height:1.1!important;
  letter-spacing:.02em!important;
  color:#04a9e8!important;
  margin-bottom:clamp(12px,1.7vh,18px)!important;
}
.sp-card-title b{color:#fff!important;}
.sp-card-sub{font-size:clamp(21px,5vw,38px)!important;line-height:1.1!important;margin-bottom:clamp(12px,1.8vh,18px)!important;}
.sp-sel{
  height:clamp(48px,7.4vh,70px)!important;
  border:2px solid rgba(255,255,255,.95)!important;
  border-radius:clamp(10px,1.8vw,16px)!important;
  background-color:rgba(16,27,43,.86)!important;
  color:#fff!important;
  font-size:clamp(16px,3.8vw,26px)!important;
  padding:0 clamp(42px,7vw,62px) 0 clamp(18px,3vw,30px)!important;
  margin-bottom:clamp(12px,1.8vh,18px)!important;
}
.sp-btn{
  width:100%!important;
  height:clamp(48px,7.3vh,68px)!important;
  border:2px solid rgba(255,255,255,.9)!important;
  border-radius:clamp(10px,1.8vw,16px)!important;
  font-size:clamp(20px,4.5vw,34px)!important;
  justify-content:center!important;
  letter-spacing:.02em!important;
}
.sp-btn.off,.sp-btn:disabled{
  background:rgba(20,25,34,.82)!important;
  color:rgba(255,255,255,.32)!important;
}
.sp-btn.grn{background:linear-gradient(135deg,#ffd34d,#f0a800)!important;color:#08142b!important;}

/* Schermi molto stretti: mantiene il look ma non esplode */
@media (max-width:390px){
  .sp-top{padding-left:14px!important;padding-right:14px!important;}
  .sp-actors{gap:9px!important;margin-bottom:14px!important;}
  .sp-abox{min-height:58px!important;border-width:2px!important;padding:7px 8px!important;gap:7px!important;}
  .sp-aphoto{width:42px!important;height:42px!important;border-radius:11px!important;}
  .sp-albl{font-size:10px!important;}
  .sp-aname{font-size:14px!important;line-height:1.05!important;}
  .sp-path{width:88vw!important;margin-bottom:14px!important;}
  .sp-pnode{width:30px!important;height:30px!important;font-size:17px!important;}
  .sp-pnode.pdot{width:17px!important;height:17px!important;}
  .sp-pline{min-width:4px!important;max-width:18px!important;height:2px!important;background:repeating-linear-gradient(90deg,#fff 0 7px,transparent 7px 12px)!important;}
  .sp-steps{padding-left:12px!important;padding-right:12px!important;}
  .sp-card{grid-template-columns:34px minmax(0,1fr)!important;gap:9px!important;border-width:1.5px!important;padding:12px 12px!important;border-radius:14px!important;}
  .sp-card-icon{font-size:26px!important;}
  .sp-card-title{font-size:12px!important;margin-bottom:8px!important;}
  .sp-sel{height:36px!important;font-size:11px!important;border-width:1px!important;border-radius:7px!important;padding-left:10px!important;padding-right:30px!important;margin-bottom:7px!important;}
  .sp-btn{height:36px!important;font-size:13px!important;border-width:1px!important;border-radius:7px!important;}
  .sp-start-lbl{font-size:15px!important;margin-bottom:7px!important;}
  .sp-logo-wrap img{width:44vw!important;max-height:34px!important;}
}

/* ============================================================ */
/* ASSET ICONS (E_Pellicola, H_Oscar – PNG trasparenti)         */
/* ============================================================ */
.sp-card-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
}
.sp-card-icon-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
}

/* ============================================================ */
/* TARGET ICO — piccola icona decorativa nella box target        */
/* ============================================================ */
.sp-target-ico {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: .85;
}

/* ============================================================ */
/* END CARD — SFIDA COMPLETATA / TIMEOUT / etc.                 */
/* ============================================================ */
.sp-end-card {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  border-color: rgba(255,211,77,.7);
  padding: 18px 14px;
}
.sp-end-left {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-end-ico {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.sp-end-emoji { font-size: 48px; line-height: 1; }
.sp-end-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-end-ttl {
  font-family: 'acumin-pro', 'Syne', sans-serif;
  font-size: clamp(17px, 5vw, 22px);
  font-weight: 900;
  color: #22c55e;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.sp-end-ttl.lose { color: #e03030; }
.sp-end-desc {
  color: rgba(255,255,255,.8);
  font-size: clamp(11px, 3.2vw, 14px);
  line-height: 1.45;
}
.sp-end-gradi {
  font-size: clamp(10px, 2.8vw, 12px);
  color: rgba(255,211,77,.75);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}
.sp-end-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.sp-end-riscatta {
  width: auto;
  padding: 10px 18px;
  font-size: clamp(13px, 3.5vw, 15px);
}
.sp-end-oscar {
  width: auto;
  padding: 10px 14px;
  background: rgba(59,130,246,.85);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.sp-end-pc {
  width: auto;
  padding: 10px 14px;
  background: rgba(220,38,38,.85);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.sp-end-hint {
  width: auto;
  padding: 10px 14px;
  background: rgba(245,158,11,.85);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.sp-end-extra {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.sp-end-mini {
  width: auto;
  padding: 8px 12px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.65);
  font-size: 12px;
}

/* ============================================================ */
/* MONDO POPCORN SCREEN                                         */
/* ============================================================ */
.mondo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: calc(env(safe-area-inset-top,0px) + 16px) 16px
           calc(var(--nav-h,88px) + var(--ad-h,56px) + env(safe-area-inset-bottom,0px) + 8px);
  box-sizing: border-box;
  gap: 12px;
  overflow: hidden;
}
.mondo-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.mondo-logo {
  max-width: min(340px, 90vw);
  max-height: 90px;
  object-fit: contain;
}
.mondo-board-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 420px;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.mondo-board { display: none; } /* board image not used — grid is self-styled */
.mondo-subtitle {
  font-family: 'acumin-pro','Syne',sans-serif;
  font-size: clamp(18px,5vw,28px);
  font-weight: 900;
  color: #ffd34d;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  letter-spacing: .04em;
  margin-top: 2px;
}

/* Merge grid — standalone board */
.mondo-grid {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 2px;
  padding: 8px;
  background: linear-gradient(160deg, #1a3a2a 0%, #0d2218 100%);
  border: 3px solid #3a7a50;
  border-radius: 14px;
  box-shadow: 0 0 0 2px #1a5035, 0 8px 32px rgba(0,0,0,.6), inset 0 0 24px rgba(0,0,0,.4);
  box-sizing: border-box;
  overflow: hidden;
}
.mondo-cell {
  position: relative;
  border-radius: clamp(6px, 1.5vw, 10px);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  -webkit-user-select: none;
  user-select: none;
}
.mondo-cell {
  aspect-ratio: 1 / 1;
}
.mondo-cell.empty,
.mondo-cell.filled {
  background: #98b36f;
  border: none;
  box-shadow: none;
}
.mondo-cell:nth-child(odd).empty,
.mondo-cell:nth-child(odd).filled {
  background: #c4df9b;
}
.mondo-cell.filled:active { transform: scale(.92); }
.mondo-cell.selected {
  border: 2.5px solid #ffd34d !important;
  box-shadow: 0 0 16px rgba(255,211,77,.5), inset 0 0 10px rgba(255,211,77,.15) !important;
  transform: scale(1.06);
  z-index: 3;
}
.mondo-cell.oscar {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  animation: oscarPulse 1.4s ease-in-out infinite !important;
  cursor: pointer;
}
.mondo-cell.oscar img {
  filter: drop-shadow(0 0 10px rgba(255,200,0,.8)) drop-shadow(0 2px 6px rgba(0,0,0,.5)) !important;
}
@keyframes oscarPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.mondo-cell img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.55));
  pointer-events: none;
}
.mondo-cell-lbl {
  font-family: 'acumin-pro','Syne',sans-serif;
  font-size: clamp(5px, 1.4vw, 8px);
  font-weight: 700;
  color: rgba(255,211,77,.7);
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  pointer-events: none;
}
@keyframes mondoCellIn {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes mergeFlash {
  0% { transform: scale(1.3); box-shadow: 0 0 30px rgba(255,211,77,.8); }
  50% { transform: scale(.95); }
  100% { transform: scale(1); box-shadow: none; }
}

/* Celebrate overlay */
.mondo-celebrate {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'acumin-pro','Syne',sans-serif;
  font-size: clamp(28px, 7vw, 44px);
  font-weight: 900;
  color: #ffd34d;
  text-shadow: 0 3px 12px rgba(0,0,0,.7), 0 0 30px rgba(255,211,77,.5);
  background: rgba(0,0,0,.5);
  border-radius: 12px;
  z-index: 10;
  animation: celebIn .3s ease both;
  pointer-events: none;
}
@keyframes celebIn {
  from { opacity: 0; transform: scale(.5); }
  to { opacity: 1; transform: scale(1); }
}

/* Footer */
.mondo-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 20px);
  flex-shrink: 0;
  padding: 8px 0 0;
  width: 100%;
  max-width: 480px;
}
.mondo-stat {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mondo-stat-ico {
  width: clamp(28px, 7vw, 40px);
  height: clamp(28px, 7vw, 40px);
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.mondo-stat-ico-oscar {
  width: clamp(38px, 9vw, 52px);
  height: clamp(38px, 9vw, 52px);
  filter: drop-shadow(0 2px 10px rgba(255,180,0,.5));
}
.mondo-stat-val {
  font-family: 'acumin-pro','Syne',sans-serif;
  font-size: clamp(14px, 3.5vw, 20px);
  font-weight: 800;
  color: #ffd34d;
}
.mondo-drop-btn {
  width: clamp(62px, 15vw, 84px);
  height: clamp(62px, 15vw, 84px);
  border: 2.5px solid rgba(255,211,77,.45);
  border-radius: 50%;
  background: rgba(10,20,45,.55);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 0 24px rgba(255,211,77,.18), inset 0 0 14px rgba(255,211,77,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10%;
  flex-shrink: 0;
}
.mondo-drop-ico {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
  pointer-events: none;
}
.mondo-drop-btn:active { transform: scale(.88); box-shadow: 0 0 30px rgba(255,211,77,.4); }
.mondo-drop-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mondo-drop-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  background: #e53935;
  color: #fff;
  font-family: 'acumin-pro','Syne',sans-serif;
  font-weight: 800;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  padding: 0 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
  pointer-events: none;
  z-index: 2;
  transition: transform .15s;
}
.mondo-drop-badge.bump { animation: badgeBump .25s ease both; }
@keyframes badgeBump { 0%{transform:scale(1)} 50%{transform:scale(1.45)} 100%{transform:scale(1)} }
.mondo-drop-btn:disabled {
  background: rgba(40,50,70,.4);
  border-color: rgba(255,255,255,.1);
  opacity: .4;
  box-shadow: none;
  cursor: not-allowed;
}

/* Drag clone — solo icona, nessun riquadro */
.mondo-drag-clone {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(1.18);
  opacity: .95;
  transition: none;
}
.mondo-drag-clone img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.6));
}
.mondo-cell.dragging {
  opacity: .3;
}
.mondo-cell.merge-target {
  border: 2.5px solid #00e676 !important;
  box-shadow: 0 0 18px rgba(0,230,118,.55) !important;
  transform: scale(1.06);
}

/* Flying popcorn: button → cell */
.mondo-pc-fly {
  position: fixed;
  z-index: 9999;
  width: 40px;
  height: 40px;
  object-fit: contain;
  pointer-events: none;
  opacity: .9;
  filter: drop-shadow(0 4px 12px rgba(255,180,0,.6));
  transition: left .4s cubic-bezier(.25,.8,.25,1), top .4s cubic-bezier(.25,.8,.25,1),
              width .4s ease, height .4s ease;
}
@keyframes mondoLand {
  0% { transform: scale(1.4); opacity: .6; }
  50% { transform: scale(.9); }
  100% { transform: scale(1); opacity: 1; }
}

/* Flying oscar animation */
.mondo-oscar-fly {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(255,211,77,.8)) drop-shadow(0 0 40px rgba(255,180,0,.5));
  transition: left .55s cubic-bezier(.4,0,.2,1), top .55s cubic-bezier(.4,0,.2,1),
              width .55s ease, height .55s ease, opacity .55s ease;
}

/* sp-steps bottom padding: nav + spazio per pubblicità */
#spSteps {
  padding-bottom: calc(var(--nav-h, 88px) + var(--ad-h, 56px) + env(safe-area-inset-bottom, 0px) + 16px);
}

/* ── TIMER A TEMPO ── */
.sp-timer {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 2px auto 4px;
  padding: 5px 18px;
  background: rgba(0,0,0,.55);
  border: 1.5px solid rgba(86,167,255,.25);
  border-radius: 999px;
  font-family: 'Syne', 'acumin-pro', sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: #e2efff;
  letter-spacing: .06em;
  min-width: 120px;
  text-align: center;
  transition: color .3s, border-color .3s, background .3s;
}
.sp-timer-icon { font-size: 16px; opacity: .8; }
.sp-timer.warn {
  color: #ff5555;
  border-color: rgba(255,60,60,.6);
  background: rgba(120,0,0,.45);
  animation: timerPulse .7s ease-in-out infinite;
}
@keyframes timerPulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}