/*
 * Copyright (c) 2025 Daniel 'Phyxor'. All Rights Reserved.
 * Website: https://ug.pages.dev
 * Unauthorized copying of this file, via any medium, is strictly prohibited.
*/
@font-face { font-family: 'Orbitron'; src: url('/asset/Orbitron-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
#mobile-version { --bg: #0a0a1a; --text: #e0e8f8; --glass-bg: rgba(20, 30, 50, 0.4); --accent1: #00f6ff; --accent2: #8e2de2; }
#mobile-version { margin: 0; background: var(--bg); color: var(--text); overflow-x: hidden; overflow-y: auto; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: url('/icon/cursor1.png'), auto; font-family: 'Orbitron', sans-serif; }
#mobile-version.theme-light { --bg: #f0f0f3; --text: #222; --glass-bg: rgba(255 255 255 / 0.7); --accent1: #8e2de2; --accent2: #00f6ff; }
#mobile-version.theme-red { --bg: #1a0a0a; --text: #ffe8e8; --glass-bg: rgba(31, 0, 0, 0.4); --accent1: #ff3c3c; --accent2: #ff7b7b; }
#mobile-version.theme-blue { --bg: #0a290a; --text: #e0f4ff; --glass-bg: rgba(21, 61, 20, 0.4); --accent1: #33cc33; --accent2: #66ff66; }
#mobile-version #bg-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; filter: blur(1.8px); }
#mobile-version .container { display: flex; gap: 2rem; width: 90vw; max-width: 1100px; margin: 2rem auto; flex-wrap: wrap; justify-content: center; align-items: flex-start; user-select: none; opacity: 0.9; }
#mobile-version .panel { flex: 1; background: var(--glass-bg); border-radius: 1.2rem; padding: 2rem; box-shadow: 0 0 40px var(--accent1), inset 0 0 15px var(--accent2); backdrop-filter: blur(16px); display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.3s ease; perspective: 900px; }
#mobile-version .panel:hover { transform: rotateY(7deg) rotateX(3deg) scale(1.02); }
#mobile-version .header { font-size: 2.2rem; font-weight: 900; background: linear-gradient(45deg, var(--accent1), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1rem; }
#mobile-version .header1 { font-size: 1.9rem; font-weight: 900; background: linear-gradient(45deg, var(--accent1), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1rem; }
#mobile-version .marquee { width: 100%; overflow: hidden; white-space: nowrap; border-top: 1px solid rgba(255 255 255 / 0.15); border-bottom: 1px solid rgba(255 255 255 / 0.15); padding: 0.5rem 0; color: var(--accent1); font-weight: 600; letter-spacing: 0.1em; user-select: none; }
#mobile-version .marquee span { display: inline-block; padding-left: 100%; animation: marqueeAnim 20s linear infinite; }
@keyframes marqueeAnim { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } }
#mobile-version .about { flex-grow: 1; font-size: 1rem; line-height: 1.5; margin-bottom: 1.2rem; }
#mobile-version .links { display: flex; flex-direction: column; gap: 0.7rem; }
#mobile-version .link-item { display: flex; align-items: center; gap: 0.7rem; background: var(--glass-bg); padding: 0.5rem 1rem; border-radius: 1rem; color: var(--accent1); font-weight: 600; text-decoration: none; transition: background 0.3s, color 0.3s; }
#mobile-version .link-item:hover { background: var(--accent1); color: var(--bg); }
#mobile-version .link-item img { width: 1.8rem; height: 1.8rem; border-radius: 50%; }
#mobile-version .footer { font-size: 0.8rem; opacity: 0.6; text-align: center; }
#mobile-version #mobile-header-buttons { position: fixed; top: 1rem; right: 1rem; z-index: 10; display: flex; gap: 0.5rem; }
#mobile-version #mobile-header-buttons button { background: var(--glass-bg); border: 2px solid var(--accent1); color: var(--accent1); font-weight: 700; padding: 0.4rem 1rem; border-radius: 999px; cursor: pointer; }
#mobile-version #mobile-header-buttons button:hover { background: var(--accent1); color: var(--bg); }
#mobile-version .card { background: var(--glass-bg); border-radius: 1rem; padding: 1.5rem; margin-top: 1rem; box-shadow: 0 0 20px rgba(0,0,0,0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; position: relative; }
#mobile-version .card:hover { transform: scale(1.05); box-shadow: 0 0 25px var(--accent1); }
#mobile-version .card h2 { margin: 0; font-size: 1.4rem; background: linear-gradient(45deg, var(--accent1), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#mobile-version .card .desc { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.8rem 1rem; background: rgba(0,0,0,0.75); color: white; font-size: 0.9rem; transform: translateY(100%); opacity: 0; transition: all 0.3s ease; border-radius: 0 0 1rem 1rem; }
#mobile-version .card:hover .desc { opacity: 1; transform: translateY(0); }
#mobile-version .container { flex-direction: column; align-items: center; } 
#mobile-version .panel { width: 90%; margin-bottom: 2rem; transform: none !important; } 
#mobile-version .panel:hover { transform: none; } 
#mobile-version .card { width: 100%; }
#mobile-version .btn:hover, #mobile-version .link-item:hover, #mobile-version .hover-reveal:hover, #mobile-version #mobile-header-buttons button:hover { cursor: url('/icon/cursor2.png'), pointer; }