/* VirusChat — Games First Update 2026-09-01
   Layer non distruttivo: si carica DOPO style.css. */
body.games-first-update{
  overflow-x:hidden;
  position:relative;
}
body.games-first-update main,
body.games-first-update .topbar,
body.games-first-update .footer,
body.games-first-update .app-nav{
  position:relative;
  z-index:2;
}

/* Ambient neon background */
.vc-ambient{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  opacity:.9;
}
.vc-ambient i{
  position:absolute;
  width:42vw;
  aspect-ratio:1;
  border-radius:999px;
  filter:blur(90px);
  opacity:.10;
  will-change:transform;
  animation:vcFloatOrb 16s ease-in-out infinite alternate;
}
.vc-ambient i:nth-child(1){left:-15vw;top:8vh;background:#a8ff35}
.vc-ambient i:nth-child(2){right:-18vw;top:28vh;background:#ff4f8b;animation-duration:21s}
.vc-ambient i:nth-child(3){left:25vw;bottom:-25vw;background:#00d9ff;animation-duration:18s}
.vc-ambient i:nth-child(4){right:18vw;bottom:12vh;width:24vw;background:#ffb31f;animation-duration:24s}
@keyframes vcFloatOrb{
  from{transform:translate3d(-2vw,-1vh,0) scale(.92)}
  to{transform:translate3d(3vw,4vh,0) scale(1.12)}
}

/* Entrance animation */
[data-vc-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .72s cubic-bezier(.2,.8,.2,1),transform .72s cubic-bezier(.2,.8,.2,1);
}
[data-vc-reveal].vc-inview{opacity:1;transform:none}
.vc-card-reveal{
  animation:vcCardEnter .55s both cubic-bezier(.2,.85,.2,1);
  animation-delay:var(--vc-delay,0ms);
}
@keyframes vcCardEnter{
  from{opacity:0;transform:translateY(18px) scale(.985)}
  to{opacity:1;transform:none}
}

/* Games as the main attraction */
.games-priority-zone{
  isolation:isolate;
  position:relative;
}
.games-priority-zone::before{
  content:"";
  position:absolute;
  inset:-34px -4vw;
  z-index:-2;
  border-radius:42px;
  background:
    linear-gradient(130deg,rgba(168,255,53,.075),transparent 37%),
    radial-gradient(circle at 86% 12%,rgba(255,79,139,.10),transparent 28%),
    rgba(255,255,255,.012);
  border:1px solid rgba(168,255,53,.09);
  box-shadow:0 35px 100px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.025);
}
.games-priority-zone::after{
  content:"";
  position:absolute;
  inset:-33px -4vw;
  z-index:-1;
  border-radius:42px;
  pointer-events:none;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,#000,transparent 82%);
}
#games .section-head h2,
.games-catalog .catalog-hero-copy h1{
  letter-spacing:-.045em;
  text-transform:uppercase;
  background:linear-gradient(92deg,#fff 0%,#dfff98 35%,#a8ff35 70%,#fff 100%);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:vcTitleFlow 6s linear infinite;
  text-shadow:0 0 34px rgba(168,255,53,.12);
}
@keyframes vcTitleFlow{to{background-position:220% center}}
#games .section-kicker,
.games-catalog .section-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:1px solid rgba(168,255,53,.24);
  border-radius:999px;
  background:rgba(168,255,53,.06);
  box-shadow:inset 0 0 22px rgba(168,255,53,.035);
}
#games .section-kicker::before,
.games-catalog .section-kicker::before{
  content:"☣";
  color:#a8ff35;
  animation:vcPulse 1.8s ease-in-out infinite;
}
@keyframes vcPulse{50%{transform:scale(1.18);filter:drop-shadow(0 0 8px #a8ff35)}}

/* Game cards get a premium hover / shine */
.games-grid .app-card,
.games-catalog + .catalog-section .app-card,
.catalog-section .app-card.is-game{
  position:relative;
  overflow:hidden;
}
.games-grid .app-card::after,
.catalog-section .app-card.is-game::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.13) 43%,transparent 58%);
  transform:translateX(-125%);
  transition:transform .7s ease;
}
@media (hover:hover){
  .games-grid .app-card:hover::after,
  .catalog-section .app-card.is-game:hover::after{transform:translateX(125%)}
  .games-grid .app-card:hover,
  .catalog-section .app-card.is-game:hover{
    border-color:color-mix(in srgb,var(--accent,#a8ff35) 48%,rgba(255,255,255,.16));
    box-shadow:0 22px 55px rgba(0,0,0,.38),0 0 28px color-mix(in srgb,var(--accent,#a8ff35) 13%,transparent);
  }
}

/* Random game is intentionally AFTER the cards */
.game-random-after{
  margin-top:30px!important;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(168,255,53,.23)!important;
  background:
    radial-gradient(circle at 78% 30%,rgba(168,255,53,.15),transparent 27%),
    linear-gradient(120deg,rgba(255,255,255,.05),rgba(255,255,255,.015))!important;
  box-shadow:0 28px 80px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.05);
}
.game-random-after::before{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  right:-90px;
  top:-130px;
  border-radius:50%;
  border:1px solid rgba(168,255,53,.25);
  box-shadow:0 0 0 28px rgba(168,255,53,.025),0 0 0 62px rgba(168,255,53,.015);
  animation:vcSpinRing 12s linear infinite;
}
@keyframes vcSpinRing{to{transform:rotate(360deg)}}
.game-random-after .games-art img{
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.38));
  animation:vcRabbitFloat 4s ease-in-out infinite;
}
@keyframes vcRabbitFloat{50%{transform:translateY(-8px) rotate(.7deg)}}
.vc-random-game-btn{
  position:relative;
  overflow:hidden;
  box-shadow:0 10px 35px rgba(168,255,53,.16);
}
.vc-random-game-btn::after{
  content:"⚡";
  margin-left:8px;
}

/* Strong separator: games first, WebApps second */
.vc-chaos-divider{
  min-height:68px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  margin-top:12px;
  margin-bottom:-10px;
  opacity:.68;
}
.vc-chaos-divider span{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(168,255,53,.45));
}
.vc-chaos-divider span:last-child{transform:scaleX(-1)}
.vc-chaos-divider b{
  font-size:.67rem;
  letter-spacing:.14em;
  color:#a8ff35;
}

/* Menu: Games visually becomes the primary area */
.desktop-nav a[href*="/games/"],
.app-nav a[href*="/games/"],
.sheet-links a[href*="/games/"]{
  position:relative;
}
.desktop-nav a[href*="/games/"]::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:-7px;
  height:2px;
  border-radius:9px;
  background:#a8ff35;
  box-shadow:0 0 10px rgba(168,255,53,.7);
  opacity:.7;
}
.app-nav a[href*="/games/"] span{
  filter:drop-shadow(0 0 8px rgba(168,255,53,.35));
}

/* Sort control gets a subtle neon focus */
.game-sort-select{
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.game-sort-select:hover{transform:translateY(-1px)}
.game-sort-select:focus{
  border-color:#a8ff35!important;
  box-shadow:0 0 0 3px rgba(168,255,53,.10),0 0 24px rgba(168,255,53,.08)!important;
}

/* Games page hero */
.games-catalog .catalog-hero-grid{
  position:relative;
  overflow:hidden;
}
.games-catalog .catalog-visual img{
  filter:drop-shadow(0 28px 50px rgba(0,0,0,.45));
  animation:vcRabbitFloat 4.5s ease-in-out infinite;
}

/* Better mobile density */
@media(max-width:760px){
  .games-priority-zone::before,
  .games-priority-zone::after{inset:-18px -10px;border-radius:28px}
  .vc-chaos-divider{min-height:52px;gap:8px}
  .vc-chaos-divider b{font-size:.56rem;letter-spacing:.08em;text-align:center}
  .game-random-after{margin-top:20px!important}
  .game-random-after::before{width:180px;height:180px;right:-75px;top:-80px}
  #games .section-head h2,
  .games-catalog .catalog-hero-copy h1{line-height:.95}
}
@media(prefers-reduced-motion:reduce){
  .vc-ambient i,
  #games .section-head h2,
  .games-catalog .catalog-hero-copy h1,
  .game-random-after::before,
  .game-random-after .games-art img,
  #games .section-kicker::before,
  .games-catalog .section-kicker::before{animation:none!important}
  [data-vc-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .vc-card-reveal{animation:none!important}
}


/* ==========================================================
   MOBILE APP NAV — FIXED FOREGROUND PATCH 2026-09-01b
   Keeps the bottom navigation permanently visible above page
   content, including Android Chrome and iPhone safe areas.
   ========================================================== */
@media (max-width: 980px){
  html{
    scroll-padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px));
  }
  body.games-first-update{
    padding-bottom:calc(86px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.games-first-update .app-nav{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:7px max(8px, env(safe-area-inset-right, 0px)) calc(7px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)) !important;
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    align-items:stretch !important;
    gap:3px !important;
    z-index:2147483000 !important;
    transform:none !important;
    translate:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    isolation:isolate !important;
    overflow:visible !important;
    border-radius:0 !important;
    border-top:1px solid rgba(255,255,255,.12) !important;
    background:rgba(7,8,10,.94) !important;
    box-shadow:0 -16px 42px rgba(0,0,0,.50), inset 0 1px 0 rgba(168,255,53,.055) !important;
    -webkit-backdrop-filter:blur(18px) saturate(145%) !important;
    backdrop-filter:blur(18px) saturate(145%) !important;
  }
  body.games-first-update .app-nav::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-1px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(168,255,53,.62),rgba(255,79,139,.32),transparent);
    pointer-events:none;
  }
  body.games-first-update .app-nav > a,
  body.games-first-update .app-nav > button{
    min-width:0 !important;
    min-height:56px !important;
    margin:0 !important;
    padding:5px 2px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    position:relative !important;
    z-index:1 !important;
    border-radius:12px !important;
    text-align:center !important;
    line-height:1 !important;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  body.games-first-update .app-nav > a > span,
  body.games-first-update .app-nav > button > span{
    line-height:1 !important;
    font-size:1.08rem !important;
  }
  body.games-first-update .app-nav small{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.64rem !important;
    line-height:1.1 !important;
  }

  /* Backdrop/sheet must open ABOVE the fixed nav when Menu is tapped. */
  body.games-first-update .sheet-backdrop{
    position:fixed !important;
    inset:0 !important;
    z-index:2147483001 !important;
  }
  body.games-first-update .mobile-sheet{
    position:fixed !important;
    z-index:2147483002 !important;
  }
}

@media (max-width: 420px){
  body.games-first-update .app-nav{
    padding-left:4px !important;
    padding-right:4px !important;
    gap:1px !important;
  }
  body.games-first-update .app-nav > a,
  body.games-first-update .app-nav > button{
    min-height:54px !important;
  }
  body.games-first-update .app-nav small{
    font-size:.59rem !important;
  }
}


/* ==========================================================
   MOBILE NO-ZOOM + VIEWPORT STABILITY PATCH — 2026-09-02
   Mantiene lo scroll, disabilita pinch/double-tap zoom e
   impedisce lo zoom automatico iOS sui campi di input.
   ========================================================== */
@media (max-width: 980px), (pointer: coarse){
  html,
  body{
    -webkit-text-size-adjust:100% !important;
    text-size-adjust:100% !important;
    touch-action:pan-x pan-y !important;
    overscroll-behavior-x:none;
  }

  input,
  textarea,
  select{
    font-size:16px !important;
  }

  body.games-first-update .app-nav{
    position:fixed !important;
    inset:auto 0 0 0 !important;
    width:100vw !important;
    min-width:100vw !important;
    max-width:100vw !important;
    transform:translateZ(0) !important;
    -webkit-transform:translateZ(0) !important;
    will-change:transform;
    contain:layout paint style;
  }
}