/* ============================================================
   Squad Reward — AW26 Prototype shell
   Screens are reproduced verbatim from the approved Dark NeoPOP
   design files (they carry their own inline styles). This sheet
   only provides the stage, transitions, loaders & animations.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* disable tap-to-select text and hold-to-save images (native-app feel) */
html,body,#stage,#stage *{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none;}
input,textarea{-webkit-user-select:text;user-select:text;}
img{-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none;}
html,body{background:#0F0E0B;font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:#F0E9D8}
body{overflow-x:hidden}
img{display:block;max-width:100%}

/* Stage holds one design screen at a time */
#stage{min-height:100vh;position:relative}
.screen{width:100%;min-height:100vh}

/* Page transition + entrance */
.screen{animation:screenIn .4s ease both}
@keyframes screenIn{from{opacity:0}to{opacity:1}}

/* Image opacity fade-in on load */
img[data-fade]{opacity:0;transition:opacity .6s ease}
img[data-fade].loaded{opacity:1}

/* Clickable hotspots */
.hot{cursor:pointer;transition:filter .15s,transform .08s}
.hot:hover{filter:brightness(1.12)}
.hot:active{transform:translateY(1px)}

/* ---- Animations used by the design screens (verbatim) ---- */
@keyframes sqrFall{0%{transform:translate3d(0,-30px,0) rotate(0deg);opacity:1}85%{opacity:1}100%{transform:translate3d(var(--sway,16px),100vh,0) rotate(600deg);opacity:0}}
@keyframes sqrPop{0%{transform:scale(0.85);opacity:0}60%{transform:scale(1.03);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes sqrPopCenter{0%{transform:translate(-50%,-50%) scale(0.85);opacity:0}60%{transform:translate(-50%,-50%) scale(1.03);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes sqrSpin{to{transform:rotate(360deg)}}
@keyframes sqrShimmer{0%{background-position:-260px 0}100%{background-position:320px 0}}
@keyframes sqrRipple{0%{transform:scale(0.6);opacity:0.55}100%{transform:scale(1.9);opacity:0}}
.sqr-shimmer{background:linear-gradient(90deg,#1C1813 0%,#2A241C 45%,#1C1813 85%);background-size:520px 100%;animation:sqrShimmer 1.5s ease-in-out infinite;border:1px solid #2C2721;}

/* Toast */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(160%);z-index:400;background:#1A1713;border:1px solid #6B5424;border-radius:4px;padding:13px 20px;font-size:13px;color:#F0E9D8;box-shadow:4px 4px 0 #000;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility .3s;max-width:90vw;text-align:center;opacity:0;visibility:hidden;pointer-events:none}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible;pointer-events:auto}
#toast .ck{color:#7FBF93;margin-right:8px}

/* Device hint chip (which design set is showing) */
#mode-chip{position:fixed;right:14px;bottom:14px;z-index:390;background:rgba(26,23,19,.9);border:1px solid #3B342A;border-radius:20px;padding:6px 14px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#9A8E79;pointer-events:none;opacity:.7}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  img[data-fade]{opacity:1}
  .screen{animation:none}
}