/* ============================================================ MOBILE-FIRST PATCH — Aggiunge / sovrascrive style.css Incolla questo ALLA FINE di style.css esistente, oppure importalo dopo: @import 'mobile.css'; ============================================================ */ /* ============================================================ VIEWPORT & TOUCH BASE (inserire nel del layout) ============================================================ */ /* ============================================================ SAFE AREA — iPhone notch / Dynamic Island / Android cutout ============================================================ */ nav { padding-left: max(2rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); } footer { padding-bottom: max(3rem, env(safe-area-inset-bottom)); } /* Game frame bottom bar */ #gameTopBar { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); } /* ============================================================ TOUCH — Aumenta target minimi a 44×44 px (WCAG 2.5.5) ============================================================ */ .btn, .nav-links a, .footer-links a, .cat-chip, .btn-play, .btn-form, .modal-tab { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Touch ripple feedback su mobile */ @media (hover: none) { .game-card:active { transform: scale(0.98); opacity: .9; } .cat-card:active { transform: scale(0.98); opacity: .9; } .btn:active { transform: scale(0.97); } } /* ============================================================ DISABILITA hover-only su touch device (evita sticky hover dopo tap) ============================================================ */ @media (hover: none) { .game-card:hover { transform: none; box-shadow: none; border-color: rgba(180,0,255,0.2); } .cat-card:hover { transform: none; box-shadow: none; } .game-card:hover::after { opacity: 0; } } /* ============================================================ CURSOR CROSSHAIR — solo su desktop ============================================================ */ @media (hover: none) { body { cursor: auto; } } /* ============================================================ PARTICLES — riduce su mobile per performance ============================================================ */ @media (max-width: 768px) { /* Il JS legge questa variabile per ridurre il numero */ :root { --particle-count: 15; } } @media (prefers-reduced-motion: reduce) { .particle, .bg-grid, .hero-orb, .ticker-inner, .hero-title .line2, .glitch { animation: none !important; transition: none !important; } } /* ============================================================ LAYOUT PRINCIPALE ============================================================ */ @media (max-width: 1024px) { section { padding: 4rem 1.5rem; } .hero { padding: 3rem 1.5rem 4rem; min-height: 75vh; } } @media (max-width: 768px) { section { padding: 3rem 1rem; } .hero { padding: 2.5rem 1rem 3rem; min-height: auto; } .content { padding-top: 20px; } /* Padding top aggiuntivo per nav fixed */ main { padding-top: 64px; } .hero-title { font-size: clamp(2.2rem, 10vw, 3.5rem); line-height: 1; } .hero-sub { font-size: 0.9rem; } .hero-cta { flex-direction: column; align-items: center; gap: 0.8rem; } .btn-hero-main, .btn-hero-sec { width: 100%; max-width: 280px; padding: 14px 20px; font-size: 0.85rem; } .stats-bar { gap: 1rem; padding: 1.5rem 1rem; } .stat-num { font-size: 1.6rem; } .stat-label { font-size: 0.7rem; } } @media (max-width: 480px) { section { padding: 2.5rem 0.75rem; } .hero { padding: 2rem 0.75rem 2.5rem; } .hero-title { font-size: clamp(1.9rem, 11vw, 2.8rem); } .hero-badge { font-size: 0.7rem; letter-spacing: 0.2em; padding: 5px 12px; } } /* ============================================================ NAV — mobile già gestito in Nav.astro Qui solo ajustes per l'header fisso ============================================================ */ @media (max-width: 900px) { nav { padding: 0 1rem; } .nav-logo { font-size: 1.1rem; } } /* ============================================================ GAMES GRID ============================================================ */ @media (max-width: 900px) { .games-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; } } @media (max-width: 600px) { .games-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; } .game-canvas-preview { height: 130px; } .game-preview-art { font-size: 3rem; } .game-name { font-size: 0.95rem; } .game-desc { font-size: 0.8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .game-info { padding: 0.85rem 0.85rem 1rem; } .game-meta { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 0.7rem; } } @media (max-width: 380px) { .games-grid { grid-template-columns: 1fr; } } /* ============================================================ CATEGORIES INDEX GRID ============================================================ */ @media (max-width: 900px) { .cats-index-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } } @media (max-width: 600px) { .cats-index-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; } .cat-card { padding: 1.25rem; gap: 0.6rem; } .cat-card-icon { font-size: 2rem; } .cat-card-name { font-size: 0.95rem; } .cat-card-desc { font-size: 0.85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } @media (max-width: 400px) { .cats-index-grid { grid-template-columns: 1fr; } } /* ============================================================ LEADERBOARD ============================================================ */ @media (max-width: 600px) { .lb-row { grid-template-columns: 32px 1fr auto; padding: 0.7rem 1rem; gap: 0.5rem; } /* Nasconde colonna vuota centrale su mobile */ .lb-row > div:nth-child(3) { display: none; } .lb-player { font-size: 0.8rem; } .lb-game { font-size: 0.65rem; } .lb-score-val { font-size: 0.8rem; } } /* ============================================================ FEATURES GRID ============================================================ */ @media (max-width: 768px) { .features-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } } @media (max-width: 480px) { .features-grid { grid-template-columns: 1fr; } } /* ============================================================ LAYOUT WITH ADS ============================================================ */ @media (max-width: 900px) { .layout-with-ads { grid-template-columns: 1fr; padding: 0 1rem; } .ad-sidebar { display: none; } } /* ============================================================ PAGE HERO (categorie, tornei, ecc.) ============================================================ */ @media (max-width: 768px) { .page-hero { padding: 2rem 1rem 1.5rem; } .page-title { font-size: clamp(2rem, 8vw, 3rem); } .cat-hero { padding: 2rem 1rem 1.5rem; gap: 1rem; } .cat-icon { font-size: 3rem; } .cat-title { font-size: clamp(1.8rem, 7vw, 3rem); } .games-section { padding: 1.5rem 1rem 3rem; } .other-cats { padding: 0 1rem 3rem; } } /* ============================================================ SECTION HEADER ============================================================ */ @media (max-width: 600px) { .section-header { flex-direction: column; align-items: center; gap: 0.5rem; } .section-title { font-size: clamp(1.5rem, 6vw, 2.2rem); } } /* ============================================================ MODAL AUTH ============================================================ */ @media (max-width: 600px) { .modal-box { width: 100%; max-height: 90dvh; border-left: none; border-right: none; /* Sheet dal basso su mobile */ border-radius: 0; position: fixed; bottom: 0; left: 0; right: 0; clip-path: none; overflow-y: auto; padding: 1.2rem 1rem 2rem; /* safe area bottom */ padding-bottom: max(2rem, env(safe-area-inset-bottom)); } .modal-overlay { align-items: flex-end; } .modal-tab { padding: 0.6rem 0.9rem; font-size: 0.75rem; } .form-input { font-size: 16px; } /* Previene zoom su iOS */ } /* ============================================================ BREADCRUMB ============================================================ */ @media (max-width: 600px) { .breadcrumb { padding: 1rem 1rem 0; font-size: 0.72rem; } } /* ============================================================ TICKER ============================================================ */ @media (max-width: 480px) { .ticker-item { font-size: 0.7rem; padding: 0 1rem; } } /* ============================================================ FOOTER ============================================================ */ @media (max-width: 600px) { footer { padding: 0 1rem max(3rem, env(safe-area-inset-bottom)); } .footer-links { gap: 1rem; } .footer-links a { font-size: 0.72rem; } .footer-social { gap: 0.75rem; } .footer-copy { font-size: 0.65rem; } } /* ============================================================ CMP BANNER — mobile già parzialmente coperto, miglioramenti ============================================================ */ @media (max-width: 600px) { #cmp-banner { padding: 1rem 0.75rem max(1.4rem, env(safe-area-inset-bottom)); gap: 0.8rem; } .cmp-buttons { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } /* Il tasto impostazioni occupa tutta la riga */ .cmp-btn-settings { grid-column: 1 / -1; } .cmp-btn { min-height: 44px; } } /* ============================================================ GAME FRAME FULLSCREEN — mobile ============================================================ */ @media (max-width: 600px) { #gameTopBar { flex-wrap: wrap; height: auto; padding: 8px max(1rem, env(safe-area-inset-right)) 8px max(1rem, env(safe-area-inset-left)); gap: 6px; } #fsBtn { display: none; } /* nasconde fullscreen su mobile: già nativo */ .g-title { flex: 1; font-size: 0.75rem; } #closeGameBtn { min-height: 36px; padding: 6px 12px; font-size: 0.7rem; } } /* ============================================================ AD SLOTS — mobile ============================================================ */ @media (max-width: 768px) { .ad-slot-leaderboard, .footer-ad-banner { min-height: 50px; } .ad-slot-leaderboard ins.adsbygoogle, .footer-ad-banner ins.adsbygoogle { width: 320px !important; height: 50px !important; } /* Centra su schermi < 320 */ .ad-slot-leaderboard { overflow-x: auto; } } @media (max-width: 340px) { .ad-slot-leaderboard ins.adsbygoogle, .footer-ad-banner ins.adsbygoogle { width: 300px !important; height: 50px !important; } } /* ============================================================ WALLET / PROFILO / TORNEI / NEGOZIO — generic responsive ============================================================ */ @media (max-width: 768px) { /* Grids a colonna singola su mobile */ .wallet-grid, .tourneys-grid { grid-template-columns: 1fr !important; } /* Tabelle scorrevoli */ .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { min-width: 480px; } } /* ============================================================ HERO ORB — riduce su mobile per perf ============================================================ */ @media (max-width: 768px) { .hero-orb { width: 300px; height: 300px; } } /* ============================================================ SCROLLBAR — thin su tutti i device ============================================================ */ * { scrollbar-width: thin; scrollbar-color: rgba(180,0,255,0.4) transparent; } ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(180,0,255,0.4); border-radius: 2px; } /* ============================================================ OVERFLOW FIX GLOBALE — nessun scroll orizzontale su mobile REGOLA CRITICA: overflow-x: hidden su è sicuro (propaga al viewport). MAI su : su Safari/iOS rompe position:fixed, spostando bottom tab bar, modal e overlay fuori posto. ============================================================ */ @media (max-width: 768px) { html { overflow-x: hidden; max-width: 100%; } /* body: NESSUN overflow-x per non rompere position:fixed */ body { width: 100%; max-width: 100vw; } /* Tutti i contenitori principali nel viewport */ .content, .layout-with-ads, section, .hero, .stats-bar, .leaderboard, .features-grid, .games-grid, .earn-grid { max-width: 100%; overflow-x: hidden; box-sizing: border-box; } /* Ad units */ .ad-slot-leaderboard, .footer-ad-banner { overflow: hidden; max-width: 100%; } .ad-slot-leaderboard ins.adsbygoogle, .footer-ad-banner ins.adsbygoogle { max-width: 100% !important; width: 100% !important; } } /* ============================================================ INTERSTITIAL AD OVERLAY — prima del gioco su mobile ============================================================ */ #adInterstitial { position: fixed; inset: 0; z-index: 10000; background: #05000d; display: flex; flex-direction: column; /* Animazione fade-in */ animation: interstitialIn 0.25s ease; } @keyframes interstitialIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } } .interstitial-inner { display: flex; flex-direction: column; height: 100%; } .interstitial-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); border-bottom: 1px solid rgba(180, 0, 255, 0.2); flex-shrink: 0; } .interstitial-brand { font-family: 'Orbitron', monospace; font-weight: 900; font-size: 1rem; color: #b400ff; letter-spacing: 0.08em; } .interstitial-skip { background: transparent; border: 1px solid rgba(180, 0, 255, 0.4); color: #b400ff; padding: 8px 16px; font-family: 'Orbitron', monospace; font-size: 0.7rem; letter-spacing: 0.1em; cursor: pointer; transition: opacity 0.4s ease, border-color 0.2s, color 0.2s; min-height: 44px; /* touch target */ } .interstitial-skip:hover, .interstitial-skip:active { border-color: #ff00c8; color: #ff00c8; } .interstitial-ad { flex: 1; display: flex; align-items: center; justify-content: center; background: #0a0018; overflow: hidden; padding: 8px; } .interstitial-ad .adsbygoogle { min-height: 250px; } .interstitial-countdown { padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); text-align: center; font-family: 'Share Tech Mono', monospace; font-size: 0.85rem; color: rgba(180, 130, 255, 0.6); border-top: 1px solid rgba(180, 0, 255, 0.1); flex-shrink: 0; } #interstitialCount { color: #b400ff; font-size: 1.3rem; font-weight: 900; font-family: 'Orbitron', monospace; } /* ============================================================ MOBILE NAV — Nascondi top nav, visibile solo bottom tab bar Il bottom tab bar usa role="tablist", la top nav role="navigation" ============================================================ */ @media (max-width: 768px) { nav[role="navigation"] { display: none !important; } .nav-spacer { display: none !important; } .content { padding-top: 0; } } /* ============================================================ LAYOUT WITH ADS — Fix overflow da iframe 728×90 Il banner 728px espande il grid item causando overflow globale. min-width:0 su grid items è il fix standard CSS Grid. ============================================================ */ @media (max-width: 768px) { /* Grid item principale non può espandersi oltre la colonna */ .layout-with-ads > div { min-width: 0; max-width: 100%; overflow: hidden; } /* Nascondi banner formato desktop su mobile */ .game-ad-banner { display: none; } } /* Nasconde il footer banner quando lo schermo è più stretto del banner (728px) */ @media (max-width: 728px) { .footer-ad-banner { display: none; } } /* ============================================================ EARN SECTION — Fix overflow e layout su mobile ============================================================ */ @media (max-width: 768px) { .wallet-hero-card { flex-direction: column; align-items: flex-start; padding: 18px 16px; gap: 16px; } .wallet-hero-coins { font-size: 36px; } .wallet-hero-right { min-width: 0; width: 100%; flex-direction: row; flex-wrap: wrap; } .wallet-hero-right .btn { flex: 1; min-width: 120px; text-align: center; } .earn-promo-card { flex-direction: column; text-align: center; padding: 16px; gap: 12px; } .earn-promo-icon { font-size: 28px; } .redeem-bar { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; } .redeem-methods { gap: 6px; } }