/* ============================================================
   30 DAYS OF PRODUCT — Workshop deck responsive layer
   Makes the fixed 1280x720 decks fit any screen (tablet + mobile),
   adds touch swipe, a mobile nav bar, and a rotate hint.
   Loaded on top of each deck; does not alter the desktop layout.
   ============================================================ */
html,body{overflow:hidden !important;background:var(--navy-deep,#0B1030)}
.stage-wrap{overflow:hidden !important}
/* Absolute-center the stage so a box wider/taller than the viewport still
   centers correctly (grid centering fails once the item exceeds the viewport). */
#stage{position:absolute !important;left:50% !important;top:50% !important;transform-origin:center center;will-change:transform}

/* ---- Mobile nav (outside the scaled stage) ---- */
.deck-mnav{
  position:fixed;z-index:2000;left:50%;transform:translateX(-50%);
  bottom:calc(12px + env(safe-area-inset-bottom,0px));
  display:none;align-items:center;gap:12px;
  background:rgba(11,16,48,0.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.14);padding:7px 9px;border-radius:100px;
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
}
.deck-mnav button{
  width:46px;height:46px;border-radius:50%;border:none;
  background:rgba(255,255,255,0.1);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .2s,color .2s,transform .2s;
}
.deck-mnav button:active{background:var(--yellow,#FFD700);color:var(--navy,#101C48);transform:scale(0.94)}
.deck-mnav button:disabled{opacity:0.35}
.deck-mnav button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.deck-mcount{font-family:'Montserrat',sans-serif;font-weight:700;font-size:0.78rem;color:#fff;min-width:60px;text-align:center;letter-spacing:0.06em}
.deck-mcount span{color:var(--yellow,#FFD700)}

/* ---- Rotate-for-best-view hint (portrait phones) ---- */
.deck-rotate{
  position:fixed;inset:0;z-index:2500;background:var(--navy-deep,#0B1030);
  display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:2rem;color:#fff;
}
.deck-rotate .dr-icon{width:58px;height:58px;stroke:var(--yellow,#FFD700);fill:none;stroke-width:1.6;margin-bottom:1.25rem;animation:deckrot 2.6s ease-in-out infinite}
@keyframes deckrot{0%,55%{transform:rotate(0)}75%,100%{transform:rotate(90deg)}}
.deck-rotate h3{font-family:'Anton',sans-serif;font-size:1.7rem;text-transform:uppercase;letter-spacing:0.02em;margin-bottom:0.5rem}
.deck-rotate p{font-family:'Nunito',sans-serif;font-size:0.95rem;color:rgba(255,255,255,0.68);max-width:32ch;line-height:1.55}
.deck-rotate button{margin-top:1.6rem;background:var(--yellow,#FFD700);color:var(--navy,#101C48);border:none;border-radius:100px;padding:0.85rem 1.5rem;font-family:'Montserrat',sans-serif;font-weight:700;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.1em;cursor:pointer}
.deck-rotate .dr-rail{position:absolute;bottom:0;left:0;right:0;height:5px;display:flex}
.deck-rotate .dr-rail i{flex:1}