/* =========================================================
   StarBridge responsive fix v1
   Obiettivo: testi card leggibili, più centrati, UI stabile
   su telefoni stretti, telefoni bassi, tablet e desktop.
   ========================================================= */

/* Evita micro-scroll orizzontali dovuti a glow / immagini */
html, body { width:100%; max-width:100%; overflow-x:hidden!important; }

/* Le schermate devono considerare sempre la nav reale */
.screen{
  padding-bottom:calc(var(--nav-h, 88px) + var(--safe-bot, 0px) + 6px)!important;
}

/* HOME: griglia più controllata */
.home-wrap{
  height:100svh!important;
  min-height:0!important;
}

.home-scroll{
  padding:0 clamp(8px, 2.2vw, 18px) 8px!important;
  min-height:0!important;
}

.logo-wrap{
  padding:clamp(2px, .8vh, 8px) 0 clamp(5px, 1.2vh, 12px)!important;
}

.logo-wrap img{
  width:min(245px, 64vw)!important;
  max-height:clamp(48px, 9svh, 86px)!important;
}

.grid{
  display:grid!important;
  grid-template-columns:repeat(2, minmax(0, 1fr))!important;
  grid-template-rows:repeat(2, minmax(0, 1fr))!important;
  gap:clamp(8px, 2.1vw, 18px)!important;
  width:100%!important;
  max-width:560px!important;
  margin:0 auto!important;
  min-height:0!important;
  overflow:visible!important;
}

.card-wrap{
  min-width:0!important;
  min-height:0!important;
  overflow:visible!important;
}

/* CARD HOME: lascia spazio al testo, poi abbassa/centra icona */
.rcard{
  width:100%!important;
  max-height:100%!important;
  min-width:0!important;
  border-radius:clamp(12px, 3vw, 18px)!important;
}

.rcard-body{
  padding:9% 6% 5%!important;
  justify-content:flex-start!important;
  gap:0!important;
}

.rcard-top{
  width:100%!important;
  max-height:none!important;
  min-height:clamp(52px, 12.5vw, 74px)!important;
  padding-top:clamp(4px, 1.2vw, 9px)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:clamp(2px, .6vw, 5px)!important;
  overflow:visible!important;
  text-align:center!important;
}

.rcard-name{
  width:100%!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow:visible!important;
  text-wrap:balance;
  font-size:clamp(17px, 4.5vw, 27px)!important;
  line-height:.96!important;
  letter-spacing:.015em!important;
  text-align:center!important;
}

.rcard-desc{
  width:100%!important;
  max-width:100%!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  white-space:normal!important;
  text-align:center!important;
  font-size:clamp(9px, 2.5vw, 14px)!important;
  line-height:1.15!important;
  margin-top:1px!important;
}

.rcard-bottom{
  flex:1 1 auto!important;
  width:100%!important;
  min-height:0!important;
  padding:3% 3% 2%!important;
  align-items:center!important;
  justify-content:center!important;
}

.rcard-icon{
  width:92%!important;
  height:92%!important;
  max-width:clamp(92px, 31vw, 170px)!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
}

/* Mondo / Oscar tendono ad avere descrizioni lunghe: compatta leggermente */
#screenHome .card-wrap:nth-child(3) .rcard-name,
#screenHome .card-wrap:nth-child(4) .rcard-name{
  font-size:clamp(17px, 4.3vw, 26px)!important;
}
#screenHome .card-wrap:nth-child(4) .rcard-desc{
  font-size:clamp(8.5px, 2.3vw, 13px)!important;
}

/* Schermi molto stretti: più respiro sopra al testo, icone meno aggressive */
@media (max-width:380px){
  .topbar{padding:6px 8px 2px!important;}
  .counter{min-width:58px!important;max-width:78px!important;height:28px!important;font-size:11px!important;}
  .counter img.ic{width:15px!important;height:15px!important;}
  .plus{width:13px!important;height:13px!important;font-size:9px!important;}

  .home-scroll{padding-left:7px!important;padding-right:7px!important;}
  .grid{gap:8px!important;max-width:100%!important;}
  .rcard-body{padding:10% 5.5% 4%!important;}
  .rcard-top{min-height:58px!important;padding-top:5px!important;}
  .rcard-name{font-size:clamp(15px, 4.6vw, 20px)!important;line-height:.96!important;}
  .rcard-desc{font-size:clamp(8px, 2.5vw, 11px)!important;line-height:1.12!important;}
  .rcard-icon{max-width:clamp(84px, 34vw, 128px)!important;width:90%!important;height:90%!important;}
}

/* Schermi bassi tipo vecchi Android: riduci logo e compatta spazi */
@media (max-height:700px){
  .logo-wrap img{max-height:50px!important;width:min(205px, 58vw)!important;}
  .logo-wrap{padding:1px 0 4px!important;}
  .grid{gap:7px!important;}
  .rcard-body{padding:8% 5% 3%!important;}
  .rcard-top{min-height:50px!important;padding-top:2px!important;}
  .rcard-name{font-size:clamp(14px, 4vw, 20px)!important;line-height:.94!important;}
  .rcard-desc{font-size:clamp(7.5px, 2vw, 10px)!important;line-height:1.08!important;}
  .nav{height:calc(76px + var(--safe-bot, 0px))!important;}
  :root{--nav-h:76px!important;}
  .nav-btn img.nav-icon{width:min(44px, 10vw)!important;height:min(44px, 10vw)!important;}
  .nav-btn span{font-size:8px!important;letter-spacing:.09em!important;}
  .nav-btn{padding-top:5px!important;padding-bottom:4px!important;gap:3px!important;}
}

/* Telefoni più grandi / tablet: tieni tutto proporzionato */
@media (min-width:520px){
  .grid{max-width:620px!important;}
  .rcard-name{font-size:clamp(20px, 3.2vw, 28px)!important;}
  .rcard-desc{font-size:clamp(10px, 1.6vw, 13px)!important;}
}

/* MODALITÀ: prima non aveva CSS dedicato. Ora diventa solida. */
.modes-scroll{
  height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:clamp(16px, 4vw, 32px) clamp(16px, 5vw, 42px) calc(var(--nav-h,88px) + 24px)!important;
  scrollbar-width:none;
}
.modes-scroll::-webkit-scrollbar{display:none;}

.modes-head{
  display:flex!important;
  align-items:center!important;
  gap:clamp(12px, 3vw, 22px)!important;
  margin-bottom:clamp(16px, 3svh, 30px)!important;
}
.modes-back{
  width:clamp(48px, 12vw, 72px)!important;
  height:clamp(48px, 12vw, 72px)!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,211,77,.35)!important;
  border-radius:16px!important;
  background:rgba(5,12,28,.62)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 0 18px rgba(255,255,255,.05)!important;
}
.modes-back img{
  width:62%!important;
  height:62%!important;
  object-fit:contain!important;
}
.modes-title{
  flex:1!important;
  margin:0!important;
  font-family:'acumin-pro','Syne',system-ui,sans-serif!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  color:#ffd34d!important;
  font-size:clamp(28px, 8.5vw, 62px)!important;
  line-height:.95!important;
  letter-spacing:.02em!important;
  text-shadow:0 4px 0 rgba(140,70,0,.65), 0 0 22px rgba(255,170,20,.35)!important;
}
.modes-intro{
  margin:0 auto clamp(18px, 4svh, 36px)!important;
  max-width:720px!important;
  color:rgba(255,255,255,.82)!important;
  font-size:clamp(18px, 4.6vw, 27px)!important;
  line-height:1.45!important;
}

.mode-card{
  max-width:720px!important;
  margin:0 auto clamp(18px, 3.2svh, 28px)!important;
  width:100%!important;
  aspect-ratio:auto!important;
  overflow:visible!important;
}

.rcard-h{
  aspect-ratio:1088/520!important;
  min-height:clamp(150px, 36vw, 250px)!important;
}
.rcard-h .rcard-body{
  padding:6% 7%!important;
}
.rcard-h .rcard-top{
  min-height:0!important;
  width:58%!important;
  margin-left:auto!important;
  align-items:flex-start!important;
  text-align:left!important;
}
.rcard-h .rcard-name{
  text-align:left!important;
  font-size:clamp(26px, 6.8vw, 48px)!important;
  line-height:.98!important;
}
.rcard-h-row{
  position:absolute!important;
  inset:0!important;
  display:block!important;
}
.rcard-h .rcard-icon{
  position:absolute!important;
  left:4%!important;
  bottom:7%!important;
  width:38%!important;
  height:72%!important;
  max-width:none!important;
  max-height:none!important;
}
.rcard-h-text{
  position:absolute!important;
  left:43%!important;
  top:43%!important;
  right:10%!important;
  display:block!important;
  min-width:0!important;
}
.rcard-h .rcard-desc{
  text-align:left!important;
  font-size:clamp(15px, 4.2vw, 23px)!important;
  line-height:1.22!important;
  -webkit-line-clamp:3!important;
}

/* Modalità su schermi stretti */
@media (max-width:380px){
  .modes-scroll{padding:14px 13px calc(var(--nav-h,76px) + 16px)!important;}
  .modes-head{gap:10px!important;margin-bottom:14px!important;}
  .modes-title{font-size:clamp(26px, 8vw, 36px)!important;}
  .modes-intro{font-size:clamp(14px, 3.9vw, 17px)!important;line-height:1.38!important;margin-bottom:14px!important;}
  .mode-card{margin-bottom:14px!important;}
  .rcard-h{min-height:138px!important;aspect-ratio:1088/555!important;}
  .rcard-h .rcard-name{font-size:clamp(20px, 5.9vw, 26px)!important;}
  .rcard-h .rcard-desc{font-size:clamp(11px, 3.25vw, 14px)!important;}
  .rcard-h-text{left:43%!important;top:45%!important;right:9%!important;}
  .rcard-h .rcard-icon{left:4%!important;width:38%!important;height:70%!important;}
}

/* =============================================
   MONDO POP-CORN WORLD v2 — redesign completo
   ============================================= */

#screenMondo{ overflow:hidden!important; }

/* Layout master */
.mondo-screen{
  height:100%!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  padding:calc(env(safe-area-inset-top,0px) + 8px)
          clamp(8px,2vw,16px)
          clamp(6px,1.2svh,12px)!important;
  gap:clamp(4px,.9svh,8px)!important;
  box-sizing:border-box!important;
}
/* Nasconde foto attore placeholder quando src è vuoto */
.sp-aphoto[src=""], .sp-aphoto:not([src]),
#spStartImg[src=""], #spTargetImg[src=""],
#spStartImg:not([src]), #spTargetImg:not([src]) {
  visibility: hidden;
}

/* ---- HUD TOP ---- */
.mondo-hud{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  width:100%!important;
}
.mondo-avatar-btn{
  width:clamp(32px,8vw,42px)!important;
  height:clamp(32px,8vw,42px)!important;
  border-radius:50%!important;
  border:2px solid rgba(255,211,77,.4)!important;
  background:rgba(255,211,77,.1)!important;
  overflow:hidden!important;
  padding:0!important;
  cursor:pointer!important;
  flex-shrink:0!important;
}
.mondo-avatar-img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.mondo-hud-pills{
  display:flex!important;
  gap:5px!important;
  flex:1 1 0!important;
  min-width:0!important;
}
.mondo-pill{
  display:flex!important;
  align-items:center!important;
  gap:3px!important;
  background:rgba(255,248,220,.1)!important;
  border:1.5px solid rgba(255,211,77,.35)!important;
  border-radius:20px!important;
  padding:3px 7px 3px 4px!important;
  flex:1 1 0!important;
  min-width:0!important;
}
.mpill-ico{
  width:clamp(16px,4vw,22px)!important;
  height:clamp(16px,4vw,22px)!important;
  object-fit:contain!important;
  flex-shrink:0!important;
}
.mpill-num{
  font-weight:800!important;
  font-size:clamp(11px,2.8vw,14px)!important;
  color:#ffd34d!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.mondo-shop-btn{
  width:clamp(32px,8vw,42px)!important;
  height:clamp(32px,8vw,42px)!important;
  border-radius:50%!important;
  border:1.5px solid rgba(255,211,77,.35)!important;
  background:rgba(255,211,77,.12)!important;
  font-size:clamp(16px,4vw,20px)!important;
  cursor:pointer!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-shrink:0!important;
}

/* ---- LOGO AREA ---- */
.mondo-logo-area{
  flex:0 0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:1px!important;
}
.mondo-logo-img{
  height:clamp(38px,8.5svh,68px)!important;
  width:auto!important;
  max-width:min(400px,90vw)!important;
  object-fit:contain!important;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.55))!important;
}
.mondo-world-lbl{
  font-family:'acumin-pro','Syne',sans-serif!important;
  font-weight:900!important;
  font-size:clamp(12px,3.2vw,18px)!important;
  color:#ffd34d!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  text-shadow:0 2px 8px rgba(0,0,0,.5)!important;
  line-height:1!important;
}

/* ---- BOARD PANEL ---- */
.pop-board-panel{
  flex:1 1 0!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:clamp(4px,.8svh,7px)!important;
  width:100%!important;
}
.pop-board-wrap{
  flex:1 1 0!important;
  min-height:0!important;
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* ---- CORNICE: Board_MondoPC.png (bordo oro/blu + scacchiera 5×7 disegnata) ---- */
.mondo-board-frame{
  position:relative!important;
  max-height:100%!important;
  max-width:min(94vw, 420px)!important;
  aspect-ratio:1100/1412!important;
  height:100%!important;
  width:auto!important;
  margin:0 auto!important;
}
.mondo-board-bg{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  pointer-events:none!important;
  filter:drop-shadow(0 4px 24px rgba(0,0,0,.5))!important;
}

/* ---- GRIGLIA 5×7 sovrapposta, allineata alla scacchiera dell'immagine ---- */
.mondo-grid{
  position:absolute!important;
  left:15.45%!important;
  right:15.45%!important;
  top:12.04%!important;
  bottom:12.89%!important;
  display:grid!important;
  grid-template-columns:repeat(5, minmax(0,1fr))!important;
  grid-template-rows:repeat(7, minmax(0,1fr))!important;
  gap:0!important;
  padding:0!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  border-radius:0!important;
  overflow:visible!important;
}

/* ---- CELLE: trasparenti, la scacchiera è nell'immagine di sfondo ---- */
.mondo-cell{
  background:transparent!important;
  aspect-ratio:1/1!important;
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
  border-radius:0!important;
}
.mondo-cell.empty,
.mondo-cell.filled{
  background:transparent!important;
}
/* Oscar: animazione sull'icona, NON sulla cella */
.mondo-cell.oscar{ animation:none!important; cursor:pointer!important; }
.mondo-cell.oscar img{ animation:oscarPulse 1.4s ease-in-out infinite!important; }

.mondo-cell img{
  width:84%!important;
  height:84%!important;
  object-fit:contain!important;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))!important;
  pointer-events:none!important;
}

/* ---- STATUS STRIP: bolle di sapone ---- */
.pop-status-strip{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(22px,7vw,44px)!important;
  width:100%!important;
  padding:6px 0 4px!important;
}
.pop-stat-bubble{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:1px!important;
  width:clamp(64px,17vw,92px)!important;
  height:clamp(64px,17vw,92px)!important;
  border-radius:50%!important;
  border:1.5px solid rgba(255,255,255,.45)!important;
  padding:0!important;
  margin:0!important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.65), rgba(255,255,255,0) 34%),
    radial-gradient(circle at 70% 78%, rgba(140,200,255,.2), rgba(140,200,255,0) 42%),
    radial-gradient(circle at 50% 50%, rgba(180,220,255,.18), rgba(120,170,255,.06) 72%, rgba(255,255,255,.02) 100%)!important;
  box-shadow:
    inset 0 0 10px rgba(255,255,255,.28),
    inset 0 -6px 16px rgba(80,140,255,.14),
    0 6px 18px rgba(0,0,0,.35)!important;
  -webkit-tap-highlight-color:transparent!important;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1)!important;
}
.pop-stat-bubble-pc{ cursor:pointer!important; }
.pop-stat-bubble-pc:active{ transform:scale(.92)!important; }
.pop-stat-bubble-pc:disabled{ opacity:.5!important; cursor:not-allowed!important; }
.pop-stat-bubble .psb-ico{
  width:clamp(24px,6vw,34px)!important;
  height:clamp(24px,6vw,34px)!important;
  object-fit:contain!important;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))!important;
}
.pop-stat-bubble .psb-ico-oscar{
  width:clamp(28px,7vw,40px)!important;
  height:clamp(28px,7vw,40px)!important;
  filter:drop-shadow(0 2px 10px rgba(255,180,0,.5))!important;
}
.pop-stat-bubble .psb-num{
  font-weight:900!important;
  font-size:clamp(13px,3.4vw,17px)!important;
  color:#ffd34d!important;
  text-shadow:0 2px 6px rgba(0,0,0,.5)!important;
  line-height:1!important;
}

/* Badge sulla bolla pop corn */
.mondo-drop-badge{
  position:absolute!important;
  top:-4px!important;
  right:-4px!important;
  min-width:20px!important;
  height:20px!important;
  border-radius:10px!important;
  background:#e53935!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:800!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 4px!important;
  pointer-events:none!important;
  z-index:5!important;
}
@keyframes badgeBump{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.4); }
  70%{ transform:scale(.9); }
  100%{ transform:scale(1); }
}
.mondo-drop-badge.bump{ animation:badgeBump .32s ease both!important; }

/* Telefoni bassi: comprimi logo e sezioni */
@media (max-height:700px){
  .mondo-logo-img{ height:clamp(30px,6.5svh,50px)!important; }
  .mondo-world-lbl{ font-size:clamp(10px,2.6vw,13px)!important; }
  .pop-stat-bubble{ width:clamp(54px,15vw,76px)!important; height:clamp(54px,15vw,76px)!important; }
  .mondo-screen{ gap:clamp(3px,.5svh,5px)!important; }
}

/* Telefoni stretti */
@media (max-width:360px){
  .mondo-hud-pills{ gap:3px!important; }
  .mondo-pill{ padding:2px 5px 2px 3px!important; }
  .pop-status-strip{ gap:clamp(16px,6vw,28px)!important; }
}