/* ===================== LIVELLO 1: platformer procedurale ===================== Durante il livello lo schermo riempie tutta la viewport del browser (100dvh + safe-area), senza richiedere la Fullscreen API del browser. */ .level1-screen { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; background: #05070a; padding: 0; display: block; /* Su mobile un tocco che il browser interpreta come "scorrimento" fa comparire/sparire la barra degli indirizzi, cambiando a runtime window.innerWidth/innerHeight: canvas.width/height (in JS) e la dimensione CSS del canvas finivano fuori sincrono, e il browser stira il contenuto del canvas per riempire la nuova box -> è quello che sembrava un'animazione "storta/distorta" solo su mobile. Con touch-action:none il browser non intercetta più il tocco come gesto di scroll/zoom, quindi i comandi rispondono subito e la vista non trema più. */ touch-action: none; overscroll-behavior: none; } .level-canvas { position: absolute; inset: 0; display: block; image-rendering: pixelated; touch-action: none; } .l1-instructions { position: absolute; left: 50%; bottom: env(safe-area-inset-bottom, 10px); transform: translateX(-50%); z-index: 8; font-family: 'Press Start 2P', monospace; font-size: 9px; letter-spacing: 0.5px; color: #7fe8d0; background: rgba(4, 8, 8, 0.6); padding: 8px 12px; border-radius: 6px; text-align: center; max-width: 90vw; } .l1-instructions.fade-out { opacity: 0; transition: opacity 0.6s ease; } /* Testo comandi: quello con tastiera/SPAZIO è inutile su un telefono (niente tastiera). level1.js aggiunge "touch-device" su quando rileva un dispositivo touch, e qui si scambia il testo di conseguenza. */ .l1-instructions--touch { display: none; } html.touch-device .l1-instructions--kbd { display: none; } html.touch-device .l1-instructions--touch { display: inline; } /* ===================== CONTROLLI TOUCH (solo mobile) ===================== Nascosti di default: compaiono solo quando level1.js rileva un dispositivo touch e marca , così su desktop restano invisibili e non rubano spazio/click. */ .l1-touch-controls { display: none; } html.touch-device .l1-touch-controls { display: block; } /* position:fixed (non absolute) apposta: un elemento "absolute" dentro .level1-screen si posiziona rispetto alla SUA box CSS (100dvh), che su iOS Safari può risultare più alta dell'area davvero visibile in quel momento (la dinamica della barra degli indirizzi non è sempre allineata 1:1 con dvh) - i pulsanti finivano sotto al bordo inferiore visibile, quindi presenti nel DOM (e nei log) ma invisibili e intoccabili. "fixed" ancora invece all'area visibile vera del browser. */ .l1-dpad { position: fixed; left: env(safe-area-inset-left, 0px); bottom: env(safe-area-inset-bottom, 0px); display: flex; gap: 14px; padding: 18px; z-index: 9; } .l1-jump-btn { position: fixed; right: env(safe-area-inset-right, 0px); bottom: env(safe-area-inset-bottom, 0px); margin: 18px; z-index: 9; } .l1-touch-btn { -webkit-tap-highlight-color: transparent; touch-action: none; /* "user-select:none" da solo non basta su iOS Safari a impedire il menu nativo di selezione/copia quando si tiene premuto (cosa che succede in continuazione qui, tenendo premuto per muoversi): serve anche "-webkit-touch-callout", che disattiva proprio quel popup. */ -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; border: 2px solid rgba(127, 232, 208, 0.55); background: rgba(4, 8, 8, 0.55); color: #7fe8d0; border-radius: 50%; width: 64px; height: 64px; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; } .l1-touch-btn:active { background: rgba(127, 232, 208, 0.35); } .l1-jump-btn { width: 78px; height: 78px; font-size: 26px; } /* ===================== TRANSIZIONE VERSO IL LIVELLO 2 ===================== */ .level1-screen.collapsing .level-canvas { animation: l1-collapse-glitch 0.7s steps(3, end) forwards; } @keyframes l1-collapse-glitch { 0% { transform: translate(0, 0) scale(1); filter: none; opacity: 1; } 20% { transform: translate(-12px, 4px) scale(1.01); filter: hue-rotate(30deg); } 40% { transform: translate(10px, -6px) scale(0.99); filter: hue-rotate(-40deg) saturate(2); } 60% { transform: translate(-8px, 8px) scale(1.02); filter: invert(0.15); opacity: 0.8; } 80% { transform: translate(6px, -4px) scale(0.97); filter: invert(0.3); opacity: 0.4; } 100% { transform: translate(0, 40px) scale(0.9); filter: invert(1); opacity: 0; } }