/* * THEME: WIRED_PS2_MEMORY_V4
 * STYLE: Serial Experiments Lain / PS2 Interface
 * FIXES: Centered Layout, VHS Overlay, Glass Tiles
 */

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap');

:root {
    --bg-color: #080808;
    --accent-red: #ff3333;       /* Lain Red */
    --accent-cyan: #00f0ff;      /* Cyber/Wired Blue */
    --text-main: #e0e0e0;
    --scanline-color: rgba(0, 0, 0, 0.5);
    --glass-border: 1px solid rgba(255, 255, 255, 0.15);
}

/* --- VHS SCANLINE OVERLAY --- */
body::after {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15),
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 3px
    );
    background-size: 100% 4px;
    pointer-events: none; /* Allows clicking through */
    z-index: 9999;
    opacity: 0.6;
}

/* --- BACKGROUND & GRID --- */
body {
    background-color: var(--bg-color) !important;
    color: var(--text-main) !important;
    font-family: 'Share Tech Mono', monospace !important;
    /* PS2-style 3D Grid floor effect */
    background-image: 
        linear-gradient(rgba(20, 30, 40, 0.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 30, 40, 0.5) 1px, transparent 1px);
    background-size: 40px 40px;
    min-height: 100vh;
}

/* --- LAYOUT FIX: CENTERING EVERYTHING --- */
/* This pulls the app container from the left to the center */
.container, .main-card, #main {
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Hide the category box borders to make tiles float */
.category-box, .panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ensure the list of apps is centered */
.apps-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    width: 100%;
}

/* --- PS2 MEMORY CARD TILES --- */
.app-tile, .tile {
    width: 140px !important;
    height: 180px !important;
    /* Glassmorphism */
    background: rgba(30, 30, 35, 0.6) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px; /* Slight curve like a memory card */
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Flex alignment for content inside tile */
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

/* Hover Effect: Lift and Glow */
.app-tile:hover {
    transform: translateY(-10px) scale(1.05);
    background: rgba(40, 40, 45, 0.9) !important;
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.3);
}

/* Icons */
.app-tile img {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.2));
    transition: 0.3s;
}

.app-tile:hover img {
    filter: drop-shadow(0 0 15px var(--accent-cyan));
}

/* App Names */
.app-tile span, .app-name {
    font-family: 'VT323', monospace;
    font-size: 1.4rem;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 1px;
}

/* --- HEADER & LOGOUT CONSISTENCY --- */
/* Force the YunoHost logo to be white/monochrome */
.yunohost-logo, .logo img {
    filter: grayscale(100%) brightness(200%); 
}

/* User Info Styling */
.user-info, .header-user {
    font-family: 'VT323', monospace;
    color: var(--accent-red);
    text-transform: uppercase;
    font-size: 1.2rem;
}

/* Uniform Logout Button */
.btn-logout, a[href*="logout"] {
    background: transparent !important;
    border: 1px solid var(--text-main) !important;
    color: var(--text-main) !important;
    font-family: 'VT323', monospace;
    text-transform: uppercase;
    border-radius: 0px !important;
    padding: 5px 20px;
    transition: 0.2s;
}

.btn-logout:hover {
    background: var(--accent-red) !important;
    border-color: var(--accent-red) !important;
    color: #000 !important;
    box-shadow: 0 0 10px var(--accent-red);
}

/* --- FOOTER LINKS --- */
.footer-links {
    margin-top: 50px;
    border-top: 1px dashed #333;
    width: 100%;
    text-align: center;
    padding-top: 20px;
}

.footer-links a {
    color: #555 !important;
    font-size: 0.9rem;
    margin: 0 10px;
    text-decoration: none;
    font-family: 'VT323', monospace;
    text-transform: uppercase;
}
.footer-links a:hover {
    color: var(--accent-cyan) !important;
}