/* maps/styles.css - Cyberpunk Overhaul */ :root { --cyber-bg: #0d0221; /* Deep space blue/purple */ --cyber-bg-lighter: #1a0a38; --cyber-bg-lightest: #2c1250; --cyber-primary-text: #e0e0e0; --cyber-secondary-text: #a095c7; --cyber-neon-pink: #ff00ff; --cyber-neon-cyan: #00ffff; --cyber-neon-green: #39ff14; --cyber-accent-orange: #ff6f00; /* From original header */ --cyber-border: rgba(var(--cyber-neon-cyan-rgb), 0.3); --cyber-border-hover: var(--cyber-neon-cyan); --cyber-shadow-color: rgba(0, 255, 255, 0.5); /* Cyan glow */ --cyber-shadow-color-pink: rgba(255, 0, 255, 0.5); /* Pink glow */ --cyber-font-primary: 'Orbitron', sans-serif; /* Example futuristic font */ --cyber-font-secondary: 'Roboto Mono', monospace; /* RGB versions for box-shadows with opacity */ --cyber-neon-cyan-rgb: 0, 255, 255; --cyber-neon-pink-rgb: 255, 0, 255; --cyber-neon-green-rgb: 57, 255, 20; /* Added for consistency */ --cyber-bg-lighter-rgb: 26, 10, 56; /* Added for consistency */ --cyber-bg-rgb: 13, 2, 33; /* Added for consistency */ } /* Import a futuristic font (optional, add to if preferred) */ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto+Mono&display=swap'); html, body { height: 100%; margin: 0; padding: 0; font-family: var(--cyber-font-secondary); /* Monospace for base */ color: var(--cyber-primary-text); background-color: var(--cyber-bg); overflow-x: hidden; /* Prevent horizontal scroll */ } .map-page-container { display: flex; flex-direction: column; min-height: 100vh; background: linear-gradient(rgba(var(--cyber-neon-cyan-rgb), 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--cyber-neon-pink-rgb), 0.03) 1px, transparent 1px); background-size: 20px 20px; /* Grid lines */ } /* --- MODIFIED HEADER STYLES --- */ .map-page-header { background-color: rgba(var(--cyber-bg-rgb), 0.85); /* Slightly less transparent base */ backdrop-filter: blur(8px); color: var(--cyber-accent-orange); padding: 0.5rem 1.5rem; /* REDUCED vertical padding */ flex-shrink: 0; position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--cyber-neon-cyan); /* Thinner border */ box-shadow: 0 2px 10px rgba(var(--cyber-neon-cyan-rgb), 0.3); min-height: 60px; /* Initial minimum height for better control */ transition: padding 0.3s ease-in-out, min-height 0.3s ease-in-out, background-color 0.3s ease-in-out; } .map-page-header .header-banner-link { display: flex; /* Helps with centering child image */ align-items: center; justify-content: center; /* Center banner image if space allows */ flex-grow: 1; /* Allow it to take up available space in the middle */ margin: 0 1rem; /* Add some margin around the banner link */ } .map-page-header .banner-image { max-width: 450px; /* INCREASED initial banner size */ height: auto; max-height: 50px; /* Control initial height */ filter: drop-shadow(0 0 5px var(--cyber-accent-orange)); transition: max-width 0.3s ease-in-out, max-height 0.3s ease-in-out; } /* --- NEW/MODIFIED PROFILE CONTAINER STYLES --- */ .profile-container { /* This is #mini-profile */ display: flex !important; /* Override inline style="display:none" for styling if authModule controls it */ align-items: center; gap: 8px; /* Space between pic and info */ flex-shrink: 0; /* Prevent shrinking if space is tight */ } #profile-link { /* Link wrapping the profile picture */ line-height: 0; /* Remove extra space from link */ } #profile-pic { width: 35px; /* REDUCED profile pic size */ height: 35px; /* REDUCED profile pic size */ border-radius: 50%; border: 1px solid var(--cyber-neon-pink); object-fit: cover; transition: width 0.3s ease-in-out, height 0.3s ease-in-out; } #profile-info { display: flex; flex-direction: column; align-items: flex-start; font-size: 0.75rem; /* REDUCED font size */ color: var(--cyber-primary-text); white-space: nowrap; /* Prevent text wrapping */ transition: opacity 0.3s ease-in-out, font-size 0.3s ease-in-out, transform 0.3s ease-in-out; } #profile-name { font-weight: bold; color: var(--cyber-neon-cyan); font-size: 0.8rem; } #auth-status-container { display: flex; align-items: center; font-size: 0.65rem; color: var(--cyber-secondary-text); } #auth-light { width: 7px; height: 7px; border-radius: 50%; background-color: var(--cyber-neon-green); margin-left: 4px; box-shadow: 0 0 4px var(--cyber-neon-green); } /* --- STYLES FOR SCROLLED HEADER --- */ .map-page-header.header-scrolled { padding-top: 0.25rem; padding-bottom: 0.25rem; min-height: 45px; /* Further REDUCED min-height */ background-color: rgba(var(--cyber-bg-rgb), 0.95); /* More opaque */ box-shadow: 0 3px 12px rgba(var(--cyber-neon-cyan-rgb), 0.4); } .map-page-header.header-scrolled .banner-image { max-width: 280px; /* REDUCED banner size on scroll */ max-height: 35px; /* REDUCED banner height on scroll */ } .map-page-header.header-scrolled #profile-pic { width: 28px; /* Further REDUCED profile pic on scroll */ height: 28px; } .map-page-header.header-scrolled #profile-info { opacity: 0; /* Hide profile text on scroll */ font-size: 0; /* Effectively hide */ transform: translateX(10px); /* Optional: slight move out effect */ pointer-events: none; } .map-page-header.header-scrolled .map-page-back-button { padding: 6px 10px; /* Slightly smaller back button */ font-size: 0.9rem; } .map-page-header.header-scrolled .map-page-back-button svg { width: 18px; /* Slightly smaller icon */ height: 18px; } /* --- END OF HEADER MODIFICATIONS --- */ .map-page-main { flex: 1; padding: 20px; color: var(--cyber-primary-text); overflow-y: auto; display: flex; flex-direction: column; align-items: center; } .map-page-footer { background-color: rgba(13, 2, 33, 0.8); backdrop-filter: blur(5px); color: var(--cyber-secondary-text); text-align: center; padding: 1rem; font-size: 0.9rem; flex-shrink: 0; border-top: 1px solid var(--cyber-neon-pink); box-shadow: 0 0 10px var(--cyber-shadow-color-pink) inset; } .footer-neon-glow { color: var(--cyber-neon-green); text-shadow: 0 0 5px var(--cyber-neon-green); } .map-page-back-button { background-color: transparent; color: var(--cyber-neon-cyan); border: 1px solid var(--cyber-neon-cyan); padding: 8px 15px; font-family: var(--cyber-font-primary); font-size: 1rem; cursor: pointer; border-radius: 4px; transition: all 0.3s ease; text-transform: uppercase; display: flex; align-items: center; gap: 8px; box-shadow: 0 0 5px rgba(var(--cyber-neon-cyan-rgb), 0); flex-shrink: 0; /* Prevent shrinking */ } .map-page-back-button svg { transition: transform 0.3s ease; width: 20px; /* Ensure initial size */ height: 20px; /* Ensure initial size */ } .map-page-back-button:hover { background-color: var(--cyber-neon-cyan); color: var(--cyber-bg); box-shadow: 0 0 15px var(--cyber-shadow-color); } .map-page-back-button:hover svg { transform: translateX(-3px); } .map-page-info { text-align: center; margin-bottom: 25px; height: auto; /* Allow content to define height */ min-height: 40px; display: flex; align-items: center; justify-content: center; } .map-page-info p { font-family: var(--cyber-font-primary); font-size: 1.5em; color: var(--cyber-neon-pink); text-shadow: 0 0 8px var(--cyber-shadow-color-pink); margin: 0; font-weight: 700; } /* View Containers */ .view-container { display: none; /* Hidden by default, JS toggles */ width: 100%; max-width: 1200px; /* Max content width */ margin: 0 auto; } .view-container.active-view { display: block; animation: fadeInView 0.5s ease-out; } @keyframes fadeInView { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .view-title { font-family: var(--cyber-font-primary); color: var(--cyber-neon-green); text-align: center; margin-bottom: 20px; font-size: 2em; text-shadow: 0 0 10px var(--cyber-neon-green); } /* Tiles Grid (for games and maps) */ .tiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; padding: 10px; } .tile-item { background-color: var(--cyber-bg-lighter); border: 1px solid var(--cyber-border); border-radius: 6px; cursor: pointer; transition: all 0.3s ease; overflow: hidden; position: relative; box-shadow: 0 0 0px var(--cyber-shadow-color); aspect-ratio: 16 / 10; /* Maintain aspect ratio */ display: flex; flex-direction: column; justify-content: flex-end; /* Text at bottom */ } .tile-item:hover { transform: translateY(-5px) scale(1.02); border-color: var(--cyber-border-hover); box-shadow: 0 0 20px var(--cyber-shadow-color); } .tile-item::before { /* Glitchy border effect on hover */ content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: transparent; z-index: -1; transition: all 0.3s ease; } .tile-item:hover::before { animation: glitch-border 0.5s infinite alternate; } @keyframes glitch-border { 0% { clip-path: inset(2px 95% 95% 2px); } 25% { clip-path: inset(95% 2px 2px 95%); } 50% { clip-path: inset(2px 2px 95% 95%); } 75% { clip-path: inset(95% 95% 2px 2px); } 100% { clip-path: inset(45% 45% 45% 45%); } } .tile-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .tile-item:hover img { transform: scale(1.05); } .tile-item h2 { position: relative; /* Ensure it's above the image's pseudo-element if any */ z-index: 2; background: linear-gradient(to top, rgba(13, 2, 33, 0.9) 0%, rgba(13, 2, 33, 0.7) 60%, transparent 100%); padding: 15px 10px 10px 10px; margin: 0; color: var(--cyber-primary-text); font-family: var(--cyber-font-primary); font-size: 1.3em; text-align: left; text-shadow: 0 0 5px var(--cyber-neon-pink); font-weight: 700; } /* Map Detail View Specifics */ .map-detail-content-wrapper { background-color: rgba(var(--cyber-bg-lighter-rgb, 26, 10, 56), 0.5); /* Use RGB for opacity */ padding: 20px; border-radius: 8px; border: 1px solid var(--cyber-neon-pink); box-shadow: 0 0 20px var(--cyber-shadow-color-pink); } .map-main-image-container { position: relative; width: 100%; max-width: 800px; margin: 0 auto 20px auto; border: 2px solid var(--cyber-neon-cyan); border-radius: 6px; overflow: hidden; box-shadow: 0 0 15px var(--cyber-shadow-color); } .map-detail-main-image, .map-detail-overlay-image { display: block; width: 100%; height: auto; border-radius: 4px; /* Applied from previous main image content style */ } .map-detail-main-image { /* Added for clickable cursor */ cursor: default; /* Default, JS will change to pointer if gallery available */ transition: opacity 0.2s ease; /* For potential future effects */ } #detail-main-map-image:hover { /* More specific selector for hover if JS makes it clickable */ /* opacity: 0.9; /* Example subtle hover if needed, but not scaling as it's the main image */ } .map-detail-overlay-image { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.3s ease-in-out; } .map-main-image-container:hover .map-detail-overlay-image { opacity: 1; /* Show on hover of parent */ display: block !important; /* Override inline style if necessary */ } .map-image-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0; } .gallery-thumbnail { width: 150px; height: 100px; object-fit: cover; border-radius: 4px; border: 1px solid var(--cyber-border); cursor: pointer; transition: all 0.2s ease; /* Kept user's 'all' transition */ } .gallery-thumbnail:hover { transform: scale(1.1); /* User's preferred scale */ border-color: var(--cyber-neon-green); box-shadow: 0 0 10px var(--cyber-neon-green); } .map-info-section { background-color: rgba(var(--cyber-bg-rgb, 13, 2, 33), 0.7); padding: 15px 20px; margin-bottom: 20px; border-radius: 6px; border-left: 3px solid var(--cyber-neon-pink); } .map-info-section h2 { /* Map Name */ font-family: var(--cyber-font-primary); color: var(--cyber-neon-cyan); margin-top: 0; margin-bottom: 15px; font-size: 2em; text-align: center; text-shadow: 0 0 8px var(--cyber-shadow-color); } .map-info-section h3 { /* Section sub-titles */ font-family: var(--cyber-font-primary); color: var(--cyber-neon-green); margin-top: 0; margin-bottom: 10px; border-bottom: 1px solid rgba(var(--cyber-neon-green-rgb, 57, 255, 20), 0.5); padding-bottom: 5px; font-size: 1.4em; } .map-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 10px; } .map-info-grid p { margin: 5px 0; font-size: 1em; } .map-info-grid p strong { color: var(--cyber-secondary-text); margin-right: 5px; } .markdown-content { line-height: 1.7; font-size: 0.95em; } .markdown-content p { margin-bottom: 1em; } .markdown-content ul, .markdown-content ol { margin-left: 20px; padding-left: 15px; margin-bottom: 1em; } .markdown-content li { margin-bottom: 0.5em; } .markdown-content a { color: var(--cyber-neon-cyan); text-decoration: none; font-weight: bold; } .markdown-content a:hover { text-decoration: underline; text-shadow: 0 0 5px var(--cyber-shadow-color); } .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content h5, .markdown-content h6 { font-family: var(--cyber-font-primary); color: var(--cyber-neon-pink); margin-top: 1.5em; margin-bottom: 0.5em; } .markdown-content code { /* Inline code */ background-color: var(--cyber-bg-lightest); padding: 0.2em 0.4em; border-radius: 3px; font-family: var(--cyber-font-secondary); color: var(--cyber-neon-green); font-size: 0.9em; } .markdown-content pre { /* Code blocks */ background-color: var(--cyber-bg-lightest); padding: 1em; border-radius: 4px; overflow-x: auto; border: 1px solid var(--cyber-border); box-shadow: inset 0 0 10px rgba(0,0,0,0.3); } .markdown-content pre code { background-color: transparent; padding: 0; color: var(--cyber-primary-text); /* Or a specific code color */ } .markdown-content blockquote { border-left: 3px solid var(--cyber-neon-cyan); padding-left: 1em; margin-left: 0; color: var(--cyber-secondary-text); font-style: italic; background-color: rgba(var(--cyber-neon-cyan-rgb), 0.05); } /* --- UPDATED IMAGE MODAL (GALLERY) STYLES --- */ .image-modal-overlay { position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; /* Allow scroll if content is too big, though max-height/width should prevent */ background-color: rgba(var(--cyber-bg-rgb), 0.9); /* User's background */ backdrop-filter: blur(8px); /* User's backdrop */ display: flex; justify-content: center; align-items: center; animation: fadeInModal 0.3s ease; /* User's animation */ } @keyframes fadeInModal { /* User's animation */ from { opacity: 0; } to { opacity: 1; } } .image-modal-content-wrapper { /* New wrapper for image and caption */ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; /* Add some margin if buttons overlap image too much, or adjust button positions */ margin: 0 60px; /* Space for side buttons, adjust as needed */ max-width: 100%; /* Ensure wrapper itself doesn't overflow */ } .image-modal-content { /* ID: #modal-image-content */ display: block; max-width: calc(100vw - 140px); /* Account for side buttons and some padding */ max-height: calc(100vh - 120px); /* Account for caption, dots, and some padding */ object-fit: contain; /* Crucial for aspect ratio */ border: 3px solid var(--cyber-neon-cyan); /* User's border */ border-radius: 4px; /* User's border-radius */ box-shadow: 0 0 30px var(--cyber-shadow-color); /* User's shadow */ background-color: #111; /* Dark background for transparent images */ } #image-modal-caption { color: var(--cyber-primary-text); margin-top: 12px; padding: 8px 15px; background-color: rgba(var(--cyber-bg-lighter-rgb), 0.8); border: 1px solid var(--cyber-border); border-radius: 4px; text-align: center; font-size: 0.9em; font-family: var(--cyber-font-secondary); max-width: 80%; word-wrap: break-word; box-shadow: 0 0 8px rgba(var(--cyber-neon-cyan-rgb), 0.3); } .modal-nav-button { cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(var(--cyber-bg-lighter-rgb), 0.7); color: var(--cyber-neon-cyan); border: 1px solid var(--cyber-neon-cyan); padding: 0; /* Padding is handled by width/height and flex centering */ font-size: 28px; font-weight: bold; z-index: 2001; /* Above image content wrapper if needed */ user-select: none; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; border-radius: 50%; /* Circular buttons */ width: 44px; /* Slightly smaller */ height: 44px; display: flex; align-items: center; justify-content: center; line-height: 1; /* For better vertical alignment of text in button */ box-shadow: 0 0 8px rgba(var(--cyber-neon-cyan-rgb), 0); } .modal-nav-button:hover { background-color: rgba(var(--cyber-neon-cyan-rgb), 0.3); color: var(--cyber-primary-text); transform: translateY(-50%) scale(1.1); box-shadow: 0 0 12px var(--cyber-shadow-color); } .modal-nav-button.prev-button { left: 10px; /* Distance from edge */ } .modal-nav-button.next-button { right: 10px; /* Distance from edge */ } .image-modal-close { position: absolute; top: 15px; /* Slightly adjusted */ right: 20px; /* Slightly adjusted */ color: var(--cyber-neon-pink); /* User's color */ font-size: 36px; /* Slightly adjusted */ font-weight: bold; cursor: pointer; z-index: 2002; /* Highest */ text-shadow: 0 0 10px var(--cyber-shadow-color-pink); /* User's shadow */ transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease; padding: 5px; /* Increase clickable area slightly */ line-height: 1; } .image-modal-close:hover, .image-modal-close:focus { color: var(--cyber-primary-text); /* User's hover color */ text-decoration: none; transform: scale(1.15); /* Slightly more pronounced */ text-shadow: 0 0 15px var(--cyber-shadow-color-pink); } .modal-nav-dots-container { position: absolute; bottom: 15px; /* Adjusted position */ left: 50%; transform: translateX(-50%); display: flex; gap: 10px; /* Space between dots */ z-index: 2001; padding: 8px 10px; background-color: rgba(var(--cyber-bg-lighter-rgb), 0.6); border-radius: 20px; /* Pill shape */ border: 1px solid var(--cyber-border); } .modal-nav-dot { width: 10px; /* Slightly smaller */ height: 10px; background-color: rgba(var(--cyber-primary-text-rgb, 224, 224, 224), 0.4); /* Assuming --cyber-primary-text-rgb if you make one */ /* Fallback if --cyber-primary-text-rgb is not defined (using a greyish white) */ background-color: rgba(200, 200, 220, 0.4); border: 1px solid var(--cyber-neon-cyan); border-radius: 50%; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .modal-nav-dot.active { background-color: var(--cyber-neon-cyan); box-shadow: 0 0 8px var(--cyber-neon-cyan); transform: scale(1.25); /* Make active dot slightly larger */ } .modal-nav-dot:hover:not(.active) { background-color: rgba(var(--cyber-neon-cyan-rgb), 0.7); transform: scale(1.15); } /* --- END OF IMAGE MODAL (GALLERY) STYLES --- */ /* Loading Spinner */ .loading-spinner-container { display: flex; justify-content: center; align-items: center; padding: 40px; width: 100%; } .cyberpunk-spinner { width: 50px; height: 50px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--cyber-neon-cyan); border-right-color: var(--cyber-neon-pink); border-bottom-color: var(--cyber-neon-green); animation: spin 1s linear infinite, color-cycle 3s linear infinite; box-shadow: 0 0 10px var(--cyber-neon-cyan), 0 0 10px var(--cyber-neon-pink) inset, 0 0 10px var(--cyber-neon-green) inset; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes color-cycle { 0%, 100% { border-top-color: var(--cyber-neon-cyan); border-right-color: var(--cyber-neon-pink); border-bottom-color: var(--cyber-neon-green); } 33% { border-top-color: var(--cyber-neon-pink); border-right-color: var(--cyber-neon-green); border-bottom-color: var(--cyber-neon-cyan); } 66% { border-top-color: var(--cyber-neon-green); border-right-color: var(--cyber-neon-cyan); border-bottom-color: var(--cyber-neon-pink); } } /* Info/Error Messages */ .info-message, .error-message { text-align: center; padding: 20px; font-size: 1.2em; font-family: var(--cyber-font-primary); width: 100%; } .info-message { color: var(--cyber-secondary-text); } .error-message { color: var(--cyber-neon-pink); text-shadow: 0 0 5px var(--cyber-neon-pink); } /* Responsive Adjustments */ @media (max-width: 768px) { .tiles-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; } .tile-item h2 { font-size: 1.1em; } /* MODIFIED: Responsive Header for tablets */ .map-page-header { padding-left: 1rem; padding-right: 1rem; min-height: 55px; } .map-page-header .banner-image { max-width: 300px; /* Adjust for tablets */ max-height: 40px; } .map-page-header.header-scrolled .banner-image { max-width: 220px; max-height: 30px; } #profile-pic { width: 30px; height: 30px; } .map-page-header.header-scrolled #profile-pic { width: 26px; height: 26px; } /* Hide profile info text earlier on smaller screens if scrolled */ .map-page-header.header-scrolled #profile-info { display: none; } .map-page-back-button { padding: 7px 12px; font-size: 0.9rem; } .map-page-back-button svg { width: 18px; height: 18px; } /* END MODIFIED */ .map-info-grid { grid-template-columns: 1fr; /* Stack on smaller screens */ } /* Modal adjustments for smaller screens */ .image-modal-content-wrapper { margin: 0 20px; /* Less margin for buttons on smaller screens */ } .image-modal-content { max-width: calc(100vw - 60px); max-height: calc(100vh - 80px); } .modal-nav-button { width: 38px; height: 38px; font-size: 22px; } .modal-nav-button.prev-button { left: 5px; } .modal-nav-button.next-button { right: 5px; } .image-modal-close { top: 10px; right: 10px; font-size: 30px; } .modal-nav-dots-container { bottom: 10px; gap: 8px; } .modal-nav-dot { width: 8px; height: 8px; } #image-modal-caption { font-size: 0.8em; margin-top: 10px; padding: 6px 10px; } } @media (max-width: 480px) { .tiles-grid { grid-template-columns: 1fr; /* Single column */ } /* MODIFIED: Responsive Header for phones */ .map-page-header { padding-left: 0.75rem; padding-right: 0.75rem; min-height: 50px; } .map-page-header .banner-image { max-width: 220px; /* Smaller for phones */ max-height: 35px; margin: 0 0.5rem; /* Reduce margin for banner on small screens */ } .map-page-header.header-scrolled .banner-image { max-width: 180px; max-height: 28px; } #profile-pic { width: 28px; height: 28px; } .map-page-header.header-scrolled #profile-pic { width: 24px; height: 24px; } #profile-info { /* Hide profile text by default on phones */ display: none; } .map-page-back-button { padding: 6px 8px; font-size: 0.8rem; gap: 4px; } /* .map-page-back-button span { /* Optionally hide "Back" text */ /* display: none; */ /* } */ .map-page-back-button svg { width: 16px; height: 16px; } /* END MODIFIED */ .map-page-info p { font-size: 1.2em; } .map-info-section h2 { font-size: 1.6em; } .map-info-section h3 { font-size: 1.2em; } /* Modal further adjustments for very small screens */ .image-modal-content-wrapper { margin: 0 10px; /* Minimal margin for buttons on very small screens */ } .image-modal-content { max-width: calc(100vw - 40px); max-height: calc(100vh - 70px); } .modal-nav-button { width: 32px; height: 32px; font-size: 18px; } .modal-nav-button.prev-button { left: 3px; } .modal-nav-button.next-button { right: 3px; } .image-modal-close { top: 8px; right: 8px; font-size: 26px; } }