/* ============================================ DESIGN SYSTEM - VARIABLES & RESET ============================================ */ :root { /* Dark theme (default) */ --poi-color: rgb(240, 250, 149); --cbtn: rgb(64, 119, 64); --bg-primary: #0a0e1a; --bg-secondary: #131826; --bg-tertiary: #1a2036; --surface-glass: rgba(25, 32, 52, 0.65); --surface-glass-strong: rgba(25, 32, 52, 0.85); /* Chrome opaco (senza backdrop-filter) per gli elementi sopra la mappa: il blur su una mappa che si muove costa tantissimo GPU/CPU ad ogni frame. */ --surface-chrome: rgba(22, 28, 46, 0.94); --surface-chrome-solid: #131826; --border-glass: rgba(255, 255, 255, 0.08); --border-glass-strong: rgba(255, 255, 255, 0.14); --text-primary: #f1f5f9; --ecc-svg: white; --text-secondary: #94a3b8; --text-tertiary: #64748b; --accent-primary: #b1d1f5; --accent-primary-rgb: 0, 255, 255; --accent-secondary: #fb7185; --accent-secondary-rgb: 251, 113, 133; --success: #4ade80; /* Colore distintivo delle quest "indovina la parola" (type: 'word') */ --word-poi-color: #91cdff; --word-poi-color-rgb: 07, 139, 120; --warning: #fbbf24; --danger: #f87171; --locked: #475569; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 32px rgba(var(--accent-primary-rgb), 0.25); --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --blur-md: 16px; --blur-lg: 24px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --transition-fast: 180ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 280ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 420ms cubic-bezier(0.16, 1, 0.3, 1); --sheet-collapsed: 140px; --sheet-expanded: 80vh; } [data-theme="light"] { --poi-color: rgb(245, 230, 197); --cbtn: rgb(139, 247, 139); --bg-primary: #f8fafc; --bg-secondary: #ffffff; --ecc-svg: black; --bg-tertiary: #f1f5f9; --surface-glass: rgba(255, 255, 255, 0.72); --surface-glass-strong: rgba(255, 255, 255, 0.92); --surface-chrome: rgba(255, 255, 255, 0.96); --surface-chrome-solid: #ffffff; --border-glass: rgba(15, 23, 42, 0.08); --border-glass-strong: rgba(15, 23, 42, 0.14); --text-primary: #0f172a; --text-secondary: #475569; --text-tertiary: #94a3b8; --accent-primary: #8cc0fc; --accent-primary-rgb: 0, 255, 255; --accent-secondary: #e11d48; --accent-secondary-rgb: 225, 29, 72; /* Versione piu' scura per contrasto su sfondo chiaro */ --word-poi-color: #adf7d2; --word-poi-color-rgb: 124, 58, 237; --locked: #cbd5e1; --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.1); --shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.15); } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } html, body { height: 100%; overflow: hidden; overscroll-behavior: none; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif; background: var(--bg-primary); color: var(--text-primary); font-size: 16px; line-height: 1.5; font-weight: 400; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: fixed; width: 100%; top: 0; left: 0; } #captureBtnText{ color: var(--ecc-svg); } /* Hide body until translations are applied (prevents FOUC of untranslated content). The inline script adds .i18n-pending; I18n.init() removes it. The fallback timeout (in the head script) guarantees the page never stays hidden. */ html.i18n-pending body { visibility: hidden; } #tourNextBtn{ color: var(--ecc-svg); } button { font-family: inherit; border: none; background: none; color: inherit; cursor: pointer; font-size: inherit; } input { font-family: inherit; border: none; background: none; color: inherit; outline: none; } /* ============================================ SCREENS CONTAINER ============================================ */ .screen { position: fixed; inset: 0; display: none; flex-direction: column; opacity: 0; transition: opacity var(--transition-base); padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); padding-left: var(--safe-left); padding-right: var(--safe-right); } .screen.active { display: flex; opacity: 1; } /* ============================================ START SCREEN ============================================ */ #startScreen { background: url("https://img.magnific.com/free-vector/glowing-neon-digital-gps-navigation-geolocation-street-map-travel-concept_1017-63959.jpg?semt=ais_hybrid&w=740&q=80") center center no-repeat; background-size: cover; background-attachment: fixed; justify-content: center; align-items: center; padding: 32px 24px; overflow-y: auto; } .start-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background-color: #014BA5; opacity: 0.6; } .start-bg::before, .start-bg::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; } .start-bg::before { width: 320px; height: 320px; background: var(--accent-primary); top: -80px; right: -80px; } .start-bg::after { width: 280px; height: 280px; background: var(--accent-secondary); bottom: -60px; left: -60px; } @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(20px, -20px) scale(1.05); } } /* Fullscreen YouTube video background - "cover" technique for any device */ .start-video-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .start-video-bg iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 16:9 aspect ratio that always covers the full viewport */ width: 100vw; height: 56.25vw; /* = 100 * 9/16 */ min-height: 100vh; min-width: 177.78vh; /* = 100 * 16/9 */ border: 0; pointer-events: none; } /* Dark overlay to keep logo, title, input and button readable above the video */ .start-video-overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient( to bottom, rgba(10, 14, 26, 0.72) 0%, rgba(10, 14, 26, 0.5) 40%, rgba(10, 14, 26, 0.75) 100% ); } .start-content { position: relative; z-index: 1; width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; } .start-logo { width: 88px; height: 88px; border-radius: var(--radius-lg); background: var(--surface-glass); backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md)); border: 1px solid var(--border-glass-strong); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md), var(--shadow-glow); animation: logoEnter 0.8s var(--transition-slow); } @keyframes logoEnter { from { opacity: 0; transform: scale(0.8) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } .start-logo svg { width: 48px; height: 48px; color: var(--accent-primary); } .start-title { display: flex; flex-direction: column; gap: 8px; animation: fadeUp 0.8s var(--transition-slow) 0.1s both; } .start-title h1 { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; background: white; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.1; } .start-title p { font-size: 15px; color: rgb(233, 233, 233); font-weight: 400; max-width: 320px; margin: 0 auto; } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .start-form { width: 100%; display: flex; flex-direction: column; gap: 16px; animation: fadeUp 0.8s var(--transition-slow) 0.2s both; } .input-group { position: relative; width: 100%; } .input-group input { width: 100%; padding: 18px 20px; background: var(--surface-glass); backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md)); border: 1px solid var(--border-glass); border-radius: var(--radius-md); color: var(--text-primary); font-size: 16px; font-weight: 500; transition: all var(--transition-fast); } .input-group input::placeholder { color: var(--text-tertiary); } .input-group input:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 4px rgba(var(--accent-primary-rgb), 0.15); background: var(--surface-glass-strong); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: var(--radius-md); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; transition: all var(--transition-fast); position: relative; overflow: hidden; min-height: 44px; user-select: none; } .btn-primary { background: var(--accent-primary); color: white; box-shadow: var(--shadow-md), 0 0 0 0 rgba(var(--accent-primary-rgb), 0.4); } #startBtn{ color: white; } .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-lg), 0 0 24px rgba(var(--accent-primary-rgb), 0.5); } .btn-primary:active:not(:disabled) { transform: translateY(0); } .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; } .btn-secondary { background: var(--surface-glass); backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md)); border: 1px solid var(--border-glass); color: var(--text-primary); } .btn-secondary:hover:not(:disabled) { background: var(--surface-glass-strong); border-color: var(--border-glass-strong); } .btn-ghost { background: transparent; color: var(--text-secondary); padding: 8px 12px; } .btn-ghost:hover { color: var(--text-primary); background: var(--surface-glass); } .btn-icon { width: 38px; height: 38px; padding: 0; border-radius: 50%; background: var(--surface-chrome); border: 1px solid var(--border-glass); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } .btn-icon:hover { background: var(--surface-glass-strong); transform: scale(1.05); } .btn-icon:active { transform: scale(0.95); } .btn-icon svg { width: 18px; height: 18px; } .start-footer { display: flex; gap: 12px; align-items: center; color: var(--text-tertiary); font-size: 13px; animation: fadeUp 0.8s var(--transition-slow) 0.3s both; } .start-footer svg { width: 16px; height: 16px; } /* ============================================ MAP SCREEN ============================================ */ #mapScreen { background: #000; } #map { position: absolute; inset: 0; z-index: 1; overflow: hidden; } .leaflet-container { background: #000; font-family: inherit; } /* Nebbia ai bordi della mappa: dissolve l'immagine personalizzata nel nero di sfondo su tutti i lati, così il bordo rettangolare dell'overlay non si vede più quando si raggiunge la fine della mappa. La maschera è relativa al box dell'immagine, quindi segue pan/zoom: al centro nessuna dissolvenza, si manifesta solo avvicinandosi ai bordi. -webkit- necessario per iOS. */ .leaflet-image-layer { border-radius: 25px; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 35%, #000 85%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 35%, #000 85%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 35%, #000 85%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 35%, #000 85%, transparent 100%); -webkit-mask-composite: destination-in; mask-composite: intersect; } /* Vignetta nera smussata (effetto illuminato): centro luminoso, bordi sfumati a nero. pointer-events:none -> non blocca i tocchi sulla mappa. z-index 500: sopra mappa+marker, sotto topbar(1000)/compass/recenter/sheet. */ #mapScreen::after { content: ""; opacity: .5; position: absolute; inset: 0; pointer-events: none; z-index: 500; background: radial-gradient(ellipse at center, transparent 0%, transparent 35%, rgba(0, 0, 0, 0.55) 65%, rgba(0, 0, 0, 0.9) 85%, rgba(0, 0, 0, 1) 100%); box-shadow: inset 0 0 80px 20px rgba(0, 0, 0, 0.75); } .leaflet-control-attribution { display: none; background: var(--surface-glass) !important; backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md)); color: var(--text-tertiary) !important; font-size: 10px !important; padding: 4px 8px !important; border-radius: var(--radius-sm) !important; border: 1px solid var(--border-glass) !important; } .leaflet-control-attribution a { display:none; color: var(--accent-primary) !important; } .leaflet-control-zoom { display:none; border: none !important; box-shadow: var(--shadow-md) !important; border-radius: var(--radius-md) !important; overflow: hidden; margin: 16px !important; } .leaflet-control-zoom a { background: var(--surface-glass-strong) !important; backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md)); color: var(--text-primary) !important; border: none !important; border-bottom: 1px solid var(--border-glass) !important; width: 40px !important; height: 40px !important; line-height: 40px !important; font-size: 18px !important; transition: background var(--transition-fast); } .leaflet-control-zoom a:last-child { border-bottom: none !important; } .leaflet-control-zoom a:hover { background: var(--bg-tertiary) !important; } /* Top bar */ .map-topbar { position: absolute; top: calc(var(--safe-top) + 16px); left: 16px; right: 16px; z-index: 1000; display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none; } .map-topbar > * { pointer-events: auto; } .topbar-left, .topbar-right { display: flex; gap: 8px; align-items: center; } .topbar-glass { background: var(--surface-chrome); border: 1px solid var(--border-glass); border-radius: var(--radius-md); padding: 10px 16px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-md); } .topbar-glass .progress-text { font-size: 14px; font-weight: 600; color: var(--text-primary); } .topbar-glass .progress-text span { color: var(--accent-primary); } /* Compass (rosa dei venti) */ .compass-container { position: absolute; top: calc(var(--safe-top) + 80px); right: 16px; z-index: 1000; width: 92px; height: 92px; background: var(--surface-chrome); border: 1px solid var(--border-glass); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255, 255, 255, 0.04); transition: transform var(--transition-base); overflow: hidden; } /* Indice fisso in alto: direzione di marcia dell'utente */ .compass-pointer { position: absolute; top: 1px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--accent-primary); z-index: 4; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); } .compass-rose { width: 86px; height: 86px; transition: transform 120ms linear; } /* Anelli */ .compass-rose .ring-outer { fill: none; stroke: var(--border-glass-strong); stroke-width: 1.2; } .compass-rose .ring-inner { fill: var(--surface-chrome); stroke: var(--border-glass-strong); stroke-width: 0.8; } /* Faccette della stella: colori fissi, leggibili su tema dark e light */ .compass-rose .facet-l { fill: #cbd5e1; } .compass-rose .facet-r { fill: #475569; } .compass-rose .facet-n-l { fill: #f87171; } .compass-rose .facet-n-r { fill: #b91c1c; } .compass-rose .rose-pivot { fill: var(--text-secondary); } .compass-rose .cardinal { fill: var(--text-secondary); font-size: 10px; font-weight: 700; font-family: var(--font-base, system-ui, sans-serif); } .compass-rose .card-n { fill: #dc2626; } /* Stato "orientamento non disponibile" */ .compass-container.unavailable, .compass-container.pending { cursor: pointer; } .compass-container.unavailable .compass-rose, .compass-container.pending .compass-rose { filter: grayscale(1); opacity: 0.35; } .compass-container.unavailable .compass-pointer, .compass-container.pending .compass-pointer { border-top-color: var(--text-tertiary); opacity: 0.5; } .compass-unavailable { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; text-align: center; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.15; color: var(--text-secondary); padding: 8px; pointer-events: none; z-index: 5; } /* Il testo "non disponibile" compare solo nello stato definitivo (=== false), non nel pending (attesa permesso), dove un tap puo' ancora attivare la bussola. */ .compass-container.unavailable .compass-unavailable { display: flex; } .compass-label { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .compass-container.unavailable .compass-label, .compass-container.pending .compass-label { opacity: 0.35; } /* Recenter button: pulsante a 3 stati (off -> GPS -> compass lock) */ .recenter-btn { position: absolute; bottom: calc(var(--safe-bottom) + 240px); right: 16px; z-index: 1000; width: 42px; height: 42px; background: var(--surface-chrome); border: 1px solid var(--border-glass); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); transition: all var(--transition-fast); } .recenter-btn:hover { transform: scale(1.05); } .recenter-btn:active { transform: scale(0.95); } /* Le 3 icone: colore di default, visibilita' in base alla modalita' */ .recenter-btn .rc-ic { display: none; width: 20px; height: 20px; color: var(--accent-primary); } .recenter-btn.mode-off .rc-off, .recenter-btn.mode-gps .rc-gps, .recenter-btn.mode-compass .rc-compass { display: block; } /* Stati attivi (GPS / compass): fondo accent + glow */ .recenter-btn.mode-gps, .recenter-btn.mode-compass { background: var(--accent-primary); border-color: var(--accent-primary); box-shadow: var(--shadow-md), var(--shadow-glow); } .recenter-btn.mode-gps .rc-ic, .recenter-btn.mode-compass .rc-ic { color: var(--ecc-svg); } /* Puntino del crosshair (stato GPS) e freccia (stato compass) pieni */ .recenter-btn .rc-dot, .recenter-btn .rc-arrow { fill: currentColor; } /* Compass lock: anello esterno aggiuntivo per distinguerlo dal GPS */ .recenter-btn.mode-compass { box-shadow: var(--shadow-md), var(--shadow-glow), 0 0 0 3px var(--border-glass); } /* ============================================ BOTTOM SHEET - WITH SWIPE SUPPORT ============================================ */ /* Backdrop overlay when sheet is expanded */ .sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 999; opacity: 0; pointer-events: none; transition: opacity var(--transition-slow); } .sheet-backdrop.visible { opacity: 1; pointer-events: auto; } .bottom-sheet { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1000; background: var(--surface-chrome-solid); border-top: 1px solid var(--border-glass-strong); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg); /* Initial collapsed state */ height: var(--sheet-collapsed); max-height: var(--sheet-expanded); display: flex; flex-direction: column; /* Smooth transitions for snap animations */ transition: height var(--transition-slow), transform var(--transition-slow); touch-action: none; /* prevent scroll conflicts */ } /* When dragging, disable transition for smooth finger tracking */ .bottom-sheet.dragging { transition: none !important; will-change: height; } /* Expanded state */ .bottom-sheet.expanded { height: var(--sheet-expanded); } /* Hidden state (fully off-screen) */ .bottom-sheet.hidden { transform: translateY(100%); } .sheet-handle { padding: 12px 0 8px; display: flex; justify-content: center; cursor: grab; flex-shrink: 0; position: relative; touch-action: none; } .sheet-handle::before { content: ""; width: 40px; height: 4px; background: var(--border-glass-strong); border-radius: 2px; transition: background var(--transition-fast), width var(--transition-fast); } .bottom-sheet.dragging .sheet-handle::before { background: var(--accent-primary); width: 56px; } .sheet-handle:active { cursor: grabbing; } .sheet-content { padding: 8px 20px 24px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; /* Prevent scroll when sheet is not expanded */ overscroll-behavior: contain; } .sheet-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; } .sheet-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2; } .sheet-subtitle { font-size: 13px; color: var(--text-secondary); margin-top: 4px; } .sheet-badge { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; } .sheet-badge svg { width: 14px; height: 14px; } .sheet-badge.active { background: rgba(var(--accent-primary-rgb), 0.15); color: var(--accent-primary); } .sheet-badge.completed { background: rgba(74, 222, 128, 0.15); color: var(--success); } .sheet-badge.locked { background: rgba(71, 85, 105, 0.2); color: var(--text-tertiary); } /* Quest list */ .quest-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .quest-item { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--bg-tertiary); border: 1px solid var(--border-glass); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); position: relative; overflow: hidden; } .quest-item:hover { background: var(--surface-glass); border-color: var(--border-glass-strong); transform: translateX(2px); } .quest-item.active { border-color: var(--accent-primary); background: rgba(var(--accent-primary-rgb), 0.08); } .quest-item.completed { opacity: 0.7; } .quest-item.locked { opacity: 0.5; cursor: not-allowed; } .quest-item.locked:hover { transform: none; } .quest-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--surface-glass); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent-primary); } .quest-item.completed .quest-icon { background: rgba(74, 222, 128, 0.15); color: var(--success); } .quest-item.locked .quest-icon { color: var(--text-tertiary); } .quest-icon svg { width: 33px; height: 33px; opacity: .8; } /* Distintivo viola per le quest parola nella lista tappe */ .quest-item.word .quest-icon { background: rgba(var(--word-poi-color-rgb), 0.12); color: var(--word-poi-color); } .quest-info { flex: 1; min-width: 0; } .quest-name { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .quest-meta { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .quest-distance { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-primary); font-weight: 600; } .quest-item.locked .quest-distance { color: var(--text-tertiary); } .quest-chevron { color: var(--text-tertiary); flex-shrink: 0; } .quest-chevron svg { width: 18px; height: 18px; } /* Progress circle */ .progress-circle { position: relative; width: 40px; height: 40px; flex-shrink: 0; } .progress-circle svg { width: 100%; height: 100%; transform: rotate(-90deg); } .progress-circle .track { fill: none; stroke: var(--border-glass); stroke-width: 3; } .progress-circle .fill { fill: none; stroke: var(--accent-primary); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset var(--transition-slow); } .progress-circle .label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-primary); } /* Quest detail sheet */ .quest-detail { display: none; flex-direction: column; gap: 20px; } .quest-detail.active { display: flex; } .quest-detail-image { width: 100%; aspect-ratio: 16/10; border-radius: var(--radius-md); overflow: hidden; position: relative; background: var(--bg-tertiary); border: 1px solid var(--border-glass); } .quest-detail-image svg { width: 100%; height: 100%; } .quest-detail-image img { width: 100%; height: 100%; object-fit: cover; } /* Immagine di suggerimento delle quest "word" (mostrata in cima alla scheda al posto della foto di riferimento): accento viola per distinguerla dalla foto delle altre quest. */ .quest-detail-image.hint-image { border-color: rgba(var(--word-poi-color-rgb), 0.45); } .quest-detail-image .distance-overlay { position: absolute; bottom: 12px; left: 12px; background: var(--surface-glass-strong); backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md)); border: 1px solid var(--border-glass); border-radius: var(--radius-sm); padding: 8px 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-primary); } .quest-detail-image .distance-overlay svg { width: 16px; height: 16px; color: var(--accent-primary); } .quest-detail-image .distance-overlay.close { color: var(--success); } .quest-detail-image .distance-overlay.close svg { color: var(--success); } .quest-detail-description { font-size: 14px; color: var(--text-secondary); line-height: 1.6; } .quest-detail-hint { padding: 14px; background: rgba(var(--accent-primary-rgb), 0.08); border: 1px solid rgba(var(--accent-primary-rgb), 0.2); border-radius: var(--radius-md); display: flex; gap: 12px; align-items: flex-start; } .quest-detail-hint svg { width: 20px; height: 20px; color: var(--accent-primary); flex-shrink: 0; margin-top: 1px; } .quest-detail-hint p { font-size: 13px; color: var(--text-primary); line-height: 1.5; } .quest-detail-hint strong { color: var(--accent-primary); font-weight: 600; } .capture-section { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; } .capture-btn { width: 100%; padding: 13px; background: var(--cbtn); border-radius: var(--radius-md); font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: var(--shadow-md); transition: all var(--transition-fast); } .capture-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-lg), 0 0 24px rgba(var(--accent-primary-rgb), 0.5); } .capture-btn:active:not(:disabled) { transform: translateY(0); } .capture-btn:disabled { opacity: .3; background: var(--bg-tertiary); color: var(--text-tertiary); cursor: not-allowed; box-shadow: none; } .capture-btn svg { width: 20px; height: 20px; } .capture-warning { padding: 12px 14px; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.25); border-radius: var(--radius-md); display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--warning); font-weight: 500; } .capture-warning svg { width: 18px; height: 18px; flex-shrink: 0; } .capture-warning.success { background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.25); color: var(--success); } /* ============================================ ANSWER SECTION (quest "indovina la parola") ============================================ */ .answer-section { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; } .answer-row { display: flex; gap: 10px; } .answer-input { flex: 1; min-width: 0; padding: 13px 14px; background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-glass-strong); border-radius: var(--radius-md); font-size: 16px; font-weight: 500; font-family: inherit; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .answer-input:focus { outline: none; border-color: var(--word-poi-color); box-shadow: 0 0 0 4px rgba(var(--word-poi-color-rgb), 0.15); } .answer-input::placeholder { color: var(--text-tertiary); } .answer-input:disabled { opacity: .4; cursor: not-allowed; } .answer-btn { flex: 0 0 auto; padding: 13px 22px; background: var(--word-poi-color); color: #fff; border: 0; border-radius: var(--radius-md); font-size: 15px; font-weight: 600; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: var(--shadow-md); transition: transform var(--transition-fast), box-shadow var(--transition-fast); cursor: pointer; } .answer-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-lg), 0 0 24px rgba(var(--word-poi-color-rgb), 0.5); } .answer-btn:active:not(:disabled) { transform: translateY(0); } .answer-btn:disabled { opacity: .3; background: var(--bg-tertiary); color: var(--text-tertiary); cursor: not-allowed; box-shadow: none; } .answer-btn svg { width: 20px; height: 20px; } /* Su schermi piccoli impili­amo input e CTA in colonna: i testi lunghi del bottone (es. "Avvicinati per rispondere") non schiacciano piu' il campo e il target touch diventa piu' comodo per il pollice. */ @media (max-width: 380px) { .answer-row { flex-direction: column; gap: 10px; } .answer-input { padding: 14px 16px; } .answer-btn { width: 100%; padding: 15px 16px; justify-content: center; white-space: normal; line-height: 1.25; } } /* Avviso geofence riusato dalla capture-warning ma tinto del colore word */ .answer-warning { padding: 12px 14px; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.25); border-radius: var(--radius-md); display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--warning); font-weight: 500; } .answer-warning svg { width: 18px; height: 18px; flex-shrink: 0; } .answer-warning.success { background: rgba(var(--word-poi-color-rgb), 0.1); border-color: rgba(var(--word-poi-color-rgb), 0.3); color: var(--word-poi-color); } .answer-error { display: none; padding: 10px 14px; background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.3); border-radius: var(--radius-md); color: var(--danger); font-size: 13px; font-weight: 500; } .answer-error.show { display: block; } /* Animazione "shake" su risposta errata */ @keyframes answerShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } } .shake { animation: answerShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97); } /* ============================================ FINAL SCREEN ============================================ */ #finalScreen { background: var(--bg-primary); overflow-y: auto; padding: 32px 24px; padding-top: calc(var(--safe-top) + 32px); padding-bottom: calc(var(--safe-bottom) + 32px); } .final-content { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; animation: fadeUp 0.8s var(--transition-slow); } .final-header { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; } .final-trophy { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.2), rgba(var(--accent-secondary-rgb), 0.2)); border: 1px solid var(--border-glass-strong); display: flex; align-items: center; justify-content: center; position: relative; animation: trophyPulse 2.5s ease-in-out infinite; } @keyframes trophyPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--accent-primary-rgb), 0.4); } 50% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(var(--accent-primary-rgb), 0); } } .final-trophy svg { width: 48px; height: 48px; color: var(--accent-primary); } .final-title { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .final-subtitle { font-size: 15px; color: var(--text-secondary); max-width: 320px; line-height: 1.5; } .final-subtitle strong { color: var(--accent-primary); font-weight: 600; } .photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .photo-card { aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; position: relative; background: var(--bg-tertiary); border: 1px solid var(--border-glass); box-shadow: var(--shadow-sm); } .photo-card img { width: 100%; height: 100%; object-fit: cover; } .photo-card .photo-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 12px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; } /* Card delle quest "indovina la parola" (niente foto): sfondo tinto del colore distintivo + badge con spunta. */ .photo-card.word { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; background: linear-gradient(135deg, rgba(var(--word-poi-color-rgb), 0.18), rgba(var(--word-poi-color-rgb), 0.06)); border-color: rgba(var(--word-poi-color-rgb), 0.35); } .photo-card.word .word-badge { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--word-poi-color); color: #fff; box-shadow: 0 4px 14px rgba(var(--word-poi-color-rgb), 0.45); } .photo-card.word .word-badge svg { width: 24px; height: 24px; } .photo-card.word .word-name { color: var(--text-primary); font-size: 12px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.25; } .photo-card.word .word-tag { color: var(--word-poi-color); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } /* Variante "immagine di suggerimento" per le quest word: quando la card contiene .word-hint-img, l'immagine occupa la parte superiore e il contenuto testuale si allinea in basso. */ .photo-card.word:has(.word-hint-img) { justify-content: flex-start; } .photo-card.word .word-hint-img { width: 100%; height: 62%; flex-shrink: 0; object-fit: cover; border-bottom: 2px solid rgba(var(--word-poi-color-rgb), 0.45); } .final-prize { padding: 20px; background: var(--surface-glass); backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md)); border: 1px solid var(--border-glass-strong); border-radius: var(--radius-lg); display: flex; gap: 16px; align-items: center; box-shadow: var(--shadow-md); } .final-prize-icon { width: 56px; height: 56px; border-radius: var(--radius-md); background: rgba(var(--accent-secondary-rgb), 0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent-secondary); } .final-prize-icon svg { width: 28px; height: 28px; } .final-prize-text { flex: 1; } .final-prize-text h3 { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; } .final-prize-text p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; } .final-actions { display: flex; flex-direction: column; gap: 10px; } /* ----- Final screen steps (share / prize / done) ----- */ .final-step { display: none; flex-direction: column; gap: 14px; } .final-step.active { display: flex; } /* Step 1: share prompt */ .final-share-prompt { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: var(--surface-glass); backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md)); border: 1px solid var(--border-glass-strong); border-radius: var(--radius-lg); } .final-share-prompt-icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(var(--accent-primary-rgb), 0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent-primary); } .final-share-prompt-icon svg { width: 24px; height: 24px; } .final-share-prompt h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; } .final-share-prompt p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; } .final-share-actions { display: flex; gap: 10px; } .btn-share { flex: 1; background: var(--accent-primary); color: #fff; font-weight: 600; } .btn-share:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); } /* Step 2: sponsor card */ .final-sponsor-card { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--bg-tertiary); border: 1px solid var(--border-glass); border-radius: var(--radius-md); } .final-sponsor-card img { width: 52px; height: 52px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; background: var(--surface-glass); } .final-sponsor-logo { width: 52px; height: 52px; border-radius: var(--radius-sm); background: var(--surface-glass); flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .final-sponsor-logo svg { width: 28px; height: 28px; color: var(--text-primary); } .final-sponsor-logo img { width: 100%; height: 100%; object-fit: cover; display: block; } .final-sponsor-info { flex: 1; min-width: 0; } .final-sponsor-name { font-size: 15px; font-weight: 700; color: var(--text-primary); line-height: 1.2; } .final-sponsor-address { font-size: 12px; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; } .final-prize-note { display: flex; gap: 10px; align-items: flex-start; padding: 14px; background: rgba(var(--accent-secondary-rgb), 0.08); border: 1px solid rgba(var(--accent-secondary-rgb), 0.2); border-radius: var(--radius-md); font-size: 13px; color: var(--text-primary); line-height: 1.5; } .final-prize-note svg { width: 20px; height: 20px; color: var(--accent-secondary); flex-shrink: 0; margin-top: 1px; } /* Step 3: done */ .final-done-icon { width: 80px; height: 80px; border-radius: 50%; background: rgba(74, 222, 128, 0.15); display: flex; align-items: center; justify-content: center; margin: 0 auto; color: var(--success); } .final-done-icon svg { width: 40px; height: 40px; } .final-done-title { text-align: center; font-size: 22px; font-weight: 700; color: var(--text-primary); } .final-done-text { text-align: center; font-size: 14px; color: var(--text-secondary); line-height: 1.5; } /* ----- Sponsor PIN modal ----- */ .pin-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(10, 14, 26, 0.8); backdrop-filter: blur(var(--blur-lg)); -webkit-backdrop-filter: blur(var(--blur-lg)); display: none; align-items: center; justify-content: center; padding: 24px; } .pin-overlay.active { display: flex; animation: fadeIn var(--transition-base); } .pin-card { background: var(--surface-glass-strong); backdrop-filter: blur(var(--blur-lg)); -webkit-backdrop-filter: blur(var(--blur-lg)); border: 1px solid var(--border-glass-strong); border-radius: var(--radius-lg); padding: 24px; max-width: 360px; width: 100%; text-align: center; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-lg); animation: fadeUp 0.3s var(--transition-slow); } .pin-card.shake { animation: shake 0.4s ease-in-out; } @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } } .pin-title { font-size: 19px; font-weight: 700; color: var(--text-primary); } .pin-label { font-size: 13px; color: var(--text-secondary); line-height: 1.5; } #pinInput { width: 100%; padding: 14px 16px; background: var(--bg-tertiary); border: 1px solid var(--border-glass-strong); border-radius: var(--radius-md); color: var(--text-primary); font-size: 22px; font-weight: 700; letter-spacing: 0.4em; text-align: center; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } #pinInput:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 4px rgba(var(--accent-primary-rgb), 0.15); } .pin-error { font-size: 13px; color: var(--danger); font-weight: 600; min-height: 18px; opacity: 0; transition: opacity var(--transition-fast); } .pin-error.show { opacity: 1; } .pin-actions { display: flex; gap: 10px; margin-top: 4px; } .pin-actions .btn { flex: 1; } /* ----- Lockout overlay ----- */ .lockout-overlay { position: fixed; inset: 0; z-index: 10001; background: var(--bg-primary); display: none; align-items: center; justify-content: center; padding: 32px 24px; } .lockout-overlay.active { display: flex; } .lockout-card { max-width: 380px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; animation: fadeUp 0.5s var(--transition-slow); } .lockout-icon { width: 88px; height: 88px; border-radius: 50%; background: rgba(71, 85, 105, 0.2); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); } .lockout-icon svg { width: 44px; height: 44px; } .lockout-card h2 { font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; } .lockout-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.5; } /* ----- Modalità "solo sponsor" (dalla schermata di lockout) ----- Nasconde la bottom sheet delle quest e il progress in topbar, lasciando visibili solo i marker sponsor sulla mappa. */ #mapScreen.sponsors-only #bottomSheet, #mapScreen.sponsors-only #sheetBackdrop, #mapScreen.sponsors-only .topbar-left { display: none !important; } @media (max-width: 380px) { .final-share-actions { flex-direction: column; } } /* ============================================ ERROR / PERMISSION SCREENS ============================================ */ .error-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(10, 14, 26, 0.85); backdrop-filter: blur(var(--blur-lg)); -webkit-backdrop-filter: blur(var(--blur-lg)); display: none; align-items: center; justify-content: center; padding: 24px; } .error-overlay.active { display: flex; } .error-card { background: var(--surface-glass-strong); backdrop-filter: blur(var(--blur-lg)); -webkit-backdrop-filter: blur(var(--blur-lg)); border: 1px solid var(--border-glass-strong); border-radius: var(--radius-lg); padding: 28px 24px; max-width: 400px; width: 100%; text-align: center; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-lg); animation: fadeUp 0.4s var(--transition-slow); } .error-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(248, 113, 113, 0.15); display: flex; align-items: center; justify-content: center; margin: 0 auto; color: var(--danger); } .error-icon svg { width: 32px; height: 32px; } .error-title { font-size: 20px; font-weight: 700; color: var(--text-primary); } .error-message { font-size: 14px; color: var(--text-secondary); line-height: 1.5; } .error-message--rich { text-align: left; font-size: 13px; line-height: 1.6; } /* ============================================ INSTRUCTIONS MODAL ============================================ */ .instructions-overlay { position: fixed; inset: 0; z-index: 9997; background: rgba(10, 14, 26, 0.7); backdrop-filter: blur(var(--blur-lg)); -webkit-backdrop-filter: blur(var(--blur-lg)); display: none; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; } .instructions-overlay.active { display: flex; animation: fadeIn var(--transition-base); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ------------------------------------------ FEATURE TOUR ------------------------------------------ */ .tour-overlay { position: fixed; inset: 0; z-index: 9998; display: none; } .tour-overlay.active { display: block; animation: fadeIn var(--transition-base); } .tour-spotlight { position: absolute; border-radius: var(--radius-md); box-shadow: 0 0 0 9999px rgba(10, 14, 26, 0.72), 0 0 0 3px var(--accent-primary), 0 0 24px 4px rgba(var(--accent-primary-rgb), 0.5); transition: top var(--transition-base), left var(--transition-base), width var(--transition-base), height var(--transition-base); pointer-events: none; } :root[data-theme="light"] .tour-spotlight { box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55), 0 0 0 3px var(--accent-primary), 0 0 24px 4px rgba(var(--accent-primary-rgb), 0.5); } .tour-tooltip { position: absolute; width: min(320px, calc(100vw - 32px)); background: var(--surface-glass-strong); backdrop-filter: blur(var(--blur-lg)); -webkit-backdrop-filter: blur(var(--blur-lg)); border: 1px solid var(--border-glass-strong); border-radius: var(--radius-md); padding: 18px 18px 14px; box-shadow: var(--shadow-lg); transition: top var(--transition-base), left var(--transition-base); animation: fadeUp 0.35s var(--transition-slow); } .tour-tooltip-step { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-primary); margin-bottom: 4px; } .tour-tooltip-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; } .tour-tooltip-text { font-size: 14px; line-height: 1.45; color: var(--text-secondary); } .tour-tooltip-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; } .tour-tooltip-nav { display: flex; gap: 8px; } .tour-tooltip .btn { font-size: 14px; padding: 10px 16px; min-height: 40px; } .tour-skip { color: var(--text-tertiary); } .tour-skip:hover { color: var(--text-secondary); } @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .instructions-card { background: var(--surface-glass-strong); backdrop-filter: blur(var(--blur-lg)); -webkit-backdrop-filter: blur(var(--blur-lg)); border: 1px solid var(--border-glass-strong); border-radius: var(--radius-lg); max-width: 460px; width: 100%; max-height: 85vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: fadeUp 0.4s var(--transition-slow); overflow: hidden; } .instructions-header { display: flex; align-items: center; gap: 14px; padding: 24px 24px 16px; flex-shrink: 0; } .instructions-header-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); background: rgba(var(--accent-primary-rgb), 0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent-primary); } .instructions-header-icon svg { width: 22px; height: 22px; } .instructions-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); } .instructions-intro { font-size: 14px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 4px; } .instructions-body { padding: 0 24px 8px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; } .instructions-step { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border-glass); } .instructions-step:last-child { border-bottom: none; } .instructions-step-num { width: 32px; height: 32px; border-radius: 50%; background: rgba(var(--accent-primary-rgb), 0.12); color: var(--accent-primary); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .instructions-step-content { flex: 1; } .instructions-step-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; } .instructions-step-text { font-size: 13px; color: var(--text-secondary); line-height: 1.5; } .instructions-footer { padding: 16px 24px 24px; flex-shrink: 0; } /* ============================================ CONFETTI ============================================ */ .confetti-container { position: fixed; inset: 0; pointer-events: none; z-index: 9998; overflow: hidden; } .confetti-piece { position: absolute; width: 8px; height: 14px; top: -20px; opacity: 0; animation: confettiFall 3s ease-in forwards; } @keyframes confettiFall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } } /* ============================================ MARKERS ============================================ */ .quest-marker { background: transparent !important; border: none !important; } .quest-marker-inner { width: 44px; height: 44px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); border: 2px solid var(--bg-primary); transition: all var(--transition-fast); position: relative; } .quest-marker-inner svg { width: 30px; height: 30px; transform: rotate(45deg); color: #fff; } .quest-marker-inner.active { /*COLORE POI*/ background: var(--poi-color); } /* Quest "indovina la parola": marker viola distintivo */ .quest-marker-inner.active.word { background: var(--word-poi-color); } .quest-marker-inner.active.word::after { border-color: rgba(var(--word-poi-color-rgb), 0.35); } /* Pulsazione spostata su uno pseudo-elemento che anima solo transform/opacity (compositor-only): il vecchio box-shadow animato forzava un repaint dei marker ad ogni frame sopra la mappa. */ .quest-marker-inner.active::after { content: ""; position: absolute; top: -8px; left: -8px; width: 90px; height: 90px; margin: -20px -20px; border-radius: 50%; border: 48px solid rgba(166, 255, 2, 0.35); opacity: 0; animation: ringPulse 2s ease-out infinite; pointer-events: none; box-sizing: border-box; } .quest-marker-inner.completed { background: var(--success); } .quest-marker-inner.locked { background: var(--locked); opacity: 0.7; } @keyframes ringPulse { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } } .user-marker { background: transparent !important; border: none !important; } .user-marker-inner { position: relative; width: 20px; height: 20px; border-radius: 50%; background: rgb(255, 183, 27); border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25), var(--shadow-md); } .user-marker-inner::after { content: ""; position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid rgba(59, 130, 246, 0.5); opacity: 0; animation: ringPulse 2s ease-out infinite; pointer-events: none; box-sizing: border-box; } /* ============================================ SPONSOR MARKERS (punti pubblicitari) ============================================ */ .sponsor-marker { background: transparent !important; border: none !important; /* Sotto i quest marker: restano prioritari */ z-index: 400 !important; } .sponsor-marker-inner { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: #2d6a9b; border: 2px solid var(--accent-primary); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); opacity: 0.82; transition: transform var(--transition-fast), opacity var(--transition-fast); display: flex; align-items: center; justify-content: center; } .sponsor-marker-inner img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .sponsor-marker-inner svg { width: 20px; height: 20px; color: #fff; pointer-events: none; } .sponsor-marker-inner:hover { opacity: 1; transform: scale(1.12); } /* Popup pubblicitario (Leaflet popup customizzato) */ .sponsor-popup .leaflet-popup-content-wrapper { background: var(--surface-chrome-solid); border: 1px solid var(--border-glass-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 0; overflow: hidden; color: var(--text-primary); } .sponsor-popup .leaflet-popup-content { margin: 0; width: 280px !important; max-width: 280px; } .sponsor-popup .leaflet-popup-tip { background: var(--surface-chrome-solid); border: 1px solid var(--border-glass-strong); } .sponsor-popup .leaflet-popup-close-button { color: #fff !important; font-size: 22px !important; width: 28px !important; height: 28px !important; line-height: 26px !important; text-align: center; top: 6px !important; right: 6px !important; background: rgba(0, 0, 0, 0.45); border-radius: 50%; z-index: 2; transition: background var(--transition-fast); } .sponsor-popup .leaflet-popup-close-button:hover { background: rgba(0, 0, 0, 0.7); } .sponsor-card { display: block; } .sponsor-card .sponsor-banner { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--bg-tertiary); } .sponsor-card .sponsor-body { padding: 14px 16px 16px; } .sponsor-card .sponsor-name { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; line-height: 1.3; } .sponsor-card .sponsor-promo { font-size: 13px; color: var(--text-secondary); line-height: 1.5; } .sponsor-card .sponsor-promo strong { color: var(--accent-secondary); font-weight: 600; } .sponsor-card .sponsor-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 14px; background: var(--accent-primary); color: #0a0e1a; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; text-decoration: none; } .sponsor-card .sponsor-cta svg { width: 14px; height: 14px; } /* ============================================ UTILITIES ============================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } @media (max-width: 380px) { .start-title h1 { font-size: 30px; } .sheet-title { font-size: 20px; } .final-title { font-size: 28px; } } /* ============================================ INSTALL BANNER ============================================ */ .install-banner { position: fixed; top: 25px; left: 16px; z-index: 9996; background: var(--surface-chrome-solid); border: 1px solid var(--border-glass-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 12px 14px; display: flex; align-items: center; gap: 12px; transform: translateX(-120%); opacity: 0; transition: transform var(--transition-slow), opacity var(--transition-base); /* Lascia spazio per la bussola (64px) a destra */ max-width: calc(100% - 92px); } .install-banner.visible { transform: translateX(0); opacity: 1; } .install-banner-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); background: rgba(var(--accent-primary-rgb), 0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent-primary); } .install-banner-icon img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; } .install-banner-body { flex: 1; min-width: 0; } .install-banner-title { font-size: 14px; font-weight: 700; color: var(--text-primary); line-height: 1.2; margin-bottom: 2px; } .install-banner-text { font-size: 12px; color: var(--text-secondary); line-height: 1.4; } .install-banner-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .install-banner-btn { padding: 9px 16px; border-radius: var(--radius-sm); background: var(--accent-primary); color: white; font-size: 13px; font-weight: 700; white-space: nowrap; transition: all var(--transition-fast); } .install-banner-btn:hover { transform: translateY(-1px); box-shadow: 0 0 16px rgba(var(--accent-primary-rgb), 0.5); } .install-banner-btn:active { transform: translateY(0); } .install-banner-close { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); flex-shrink: 0; transition: all var(--transition-fast); } .install-banner-close:hover { background: var(--surface-glass); color: var(--text-primary); } .install-banner-close svg { width: 18px; height: 18px; } @media (max-width: 360px) { .install-banner { padding: 12px; gap: 10px; } .install-banner-icon { width: 38px; height: 38px; } .install-banner-text { font-size: 11px; } .install-banner-btn { padding: 8px 12px; font-size: 12px; } } @media (min-width: 768px) { .bottom-sheet { max-width: 520px; left: 50%; transform: translateX(-50%); border-radius: var(--radius-xl) var(--radius-xl) 0 0; } .bottom-sheet.hidden { transform: translate(-50%, 100%); } } .legacy-account-nav { position: fixed; top: max(10px, env(safe-area-inset-top)); right: 12px; z-index: 10000; display: flex; align-items: center; gap: 5px; padding: 5px; border: 1px solid var(--border-glass-strong); border-radius: 999px; background: var(--surface-glass-strong); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-md); } .legacy-account-nav a { padding: 7px 10px; border-radius: 999px; color: var(--text-secondary); font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; } .legacy-account-nav a:hover { background: var(--surface-glass); color: var(--text-primary); } .legacy-account-nav.game-active { display: none; } @media (max-width: 520px) { .legacy-account-nav { max-width: calc(100vw - 24px); overflow-x: auto; } }