:root {
    --poster-bg: #F2F0E9;
    --poster-accent: #FF3300;
    --poster-text: #1A1A1A;
    --primary-color: #ff0050;
    /* Kept for subpages */
    --secondary-color: #00f0ff;
    /* Kept for subpages */
    --bg-color: #050505;
    /* Kept for subpages */
    --bg-dark: #000000;
    --text-color: #e0e0e0;
    --dim-color: #555;
    --border-color: #333;
    --hud-border: 1px solid var(--primary-color);
    --glass-bg: rgba(10, 10, 10, 0.85);

    --font-mono: 'JetBrains Mono', monospace;
    --font-display: 'Rajdhani', sans-serif;
    --font-chinese: "Microsoft YaHei", "SimHei", serif;
    --font-khmer: 'Moul', serif;
    /* Pali Moul style */
}

@import url('https://fonts.googleapis.com/css2?family=Moul&display=swap');

/* Poster Styles */
.poster-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--poster-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 10000;
    /* On top of everything */
}

.poster-bg-text {
    position: absolute;
    top: 40%;
    /* Moved up */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 2%;
    font-family: var(--font-chinese);
    font-weight: 900;
    font-size: 23vw;
    color: #ff0050;
    /* Updated to requested color */
    /* text-stroke removed */
    line-height: 1;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.poster-bg-text span {
    display: block;
    height: 100%;
}

.poster-image-wrapper {
    position: fixed;
    /* Stick to bottom */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100vh;
    /* Changed from 95vh to 100vh for full coverage */
    z-index: 2;
    width: 100vw;
    /* Full width container */
    max-width: none;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* Restored */
    pointer-events: auto;
    /* Allow clicking on the image to enter */
    /* Restored */
    /* Let clicks pass through to nav if needed */
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 100%);
}

.poster-image-wrapper picture {
    display: contents;
}

.poster-img {
    height: 100%;
    width: auto;
    object-fit: contain;
    /* Ensure whole image is visible */
    max-width: 100%;
    /* Don't overflow width */
    filter: contrast(1.1) saturate(1.1);
}

/* Footer Details */
.poster-footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    z-index: 3;
    color: var(--poster-accent);
    font-family: var(--font-display);
    text-transform: uppercase;
}

/* Khmer Text Overrides */
.khmer-text .location,
.khmer-text .id-check,
.khmer-text .heritage {
    font-family: var(--font-khmer);
    font-size: 1rem;
    /* Slightly larger for Khmer readability */
    line-height: 1.6;
}

.footer-left,
.footer-right {
    max-width: 300px;
}

.footer-left,
.footer-right {
    max-width: 300px;
}

.poster-footer h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.poster-footer p {
    font-size: 0.6rem;
    line-height: 1.4;
    margin-bottom: 20px;
    opacity: 0.8;
    color: var(--poster-accent);
    /* Ensure consistent color */
}

.location,
.heritage {
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.id-check {
    font-size: 0.8rem;
    font-weight: 700;
}

/* Navigation Button */
.poster-nav {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.poster-nav button {
    background: transparent;
    border: none;
    color: var(--poster-accent);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.poster-nav button:hover {
    opacity: 1;
}

/* Hide original scanline on poster */
.poster-container~.scanline {
    display: none;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

*::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari/Webkit */
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-mono);
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Content Protection */
body.protected {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

img {
    pointer-events: none;
    -webkit-user-drag: none;
}

/* Scanline Effect */
.scanline {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0) 50%,
            rgba(0, 0, 0, 0.1) 50%,
            rgba(0, 0, 0, 0.1));
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.3;
}

.hud-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px;
    background: radial-gradient(circle at center, #111 0%, #000 100%);
}

/* Header */
.hud-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    border-bottom: 2px solid var(--primary-color);
    margin-bottom: 10px;
    padding: 0 20px;
    background: rgba(20, 0, 5, 0.5);
    clip-path: polygon(0 0, 100% 0, 100% 70%, 98% 100%, 2% 100%, 0 70%);
}

.hud-nav {
    display: flex;
    gap: 2px;
}

.nav-btn {
    background: transparent;
    border: 1px solid var(--dim-color);
    color: var(--dim-color);
    padding: 8px 20px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    overflow: hidden;
}

.nav-btn:hover,
.nav-btn.active {
    background: var(--primary-color);
    color: #000;
    border-color: var(--primary-color);
    box-shadow: 0 0 15px var(--primary-color);
}

.nav-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: 0.5s;
}

.nav-btn:hover::before {
    left: 100%;
}

.header-decoration {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--primary-color);
    opacity: 0.8;
}

/* Main Content */
.hud-main {
    flex: 1;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 0, 80, 0.3);
    background: rgba(0, 0, 0, 0.4);
    padding: 20px;
}

.hud-section {
    display: none;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    animation: fadeIn 0.5s ease-in-out;
}

.hud-section.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Footer */
.hud-footer {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid var(--primary-color);
    margin-top: 10px;
    padding: 0 20px;
    background: rgba(20, 0, 5, 0.5);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.footer-links {
    display: flex;
    gap: 15px;
}

.footer-links a {
    color: var(--dim-color);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--primary-color);
    text-shadow: 0 0 5px var(--primary-color);
}

.footer-deco {
    color: var(--secondary-color);
}

/* Utilities */
.loading-text {
    color: var(--primary-color);
    font-family: var(--font-mono);
    text-align: center;
    margin-top: 20%;
    animation: blink 1s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* Music Player Layout */
.music-player-container {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 20px;
    height: 100%;
}

@media (max-width: 1024px) {
    .music-player-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: 100%;
        overflow: hidden;
        gap: 0; /* Remove gap to save space */
    }

    .player-area {
        position: relative; /* Changed from sticky to relative for better flow control */
        z-index: 100;
        background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
        padding-bottom: 10px;
        padding-top: 10px;
        flex-shrink: 0; /* Prevent shrinking */
    }

    /* Compact Disc for Mobile */
    .disc-area {
        margin: 10px 0; /* Reduced margin */
    }

    .disc-cover {
        width: 140px; /* Smaller disc */
        height: 140px;
    }

    .disc-center {
        width: 40px;
        height: 40px;
        border-width: 3px;
    }

    .song-info {
        margin-bottom: 10px;
        width: 90%;
    }

    .song-title {
        font-size: 1.5rem;
    }

    .progress-container {
        width: 90%;
        margin-bottom: 15px;
    }

    .playlist-area {
        overflow-y: auto; /* Ensure playlist scrolls */
        padding-bottom: 60px; /* Space for footer/thumb */
    }
}

/* Playlist Item Animation */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.playlist-item {
    animation: slideInRight 0.3s ease-out forwards;
    opacity: 0;
    /* meaningful start state */
    animation-delay: calc(var(--i) * 0.05s);
    /* Staggered delay handled by JS if var set, else default */
}

/* Player Area */
.player-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.player-header {
    position: absolute;
    top: 15px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--dim-color);
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 5px;
}

.player-status-icon {
    color: var(--primary-color);
}

.disc-area {
    margin: 40px 0;
    position: relative;
}

.disc-cover {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, #222 10%, #000 70%);
    border: 2px solid var(--dim-color);
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 0, 80, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: spin 10s linear infinite;
    animation-play-state: paused;
}

.disc-cover.playing {
    animation-play-state: running;
    border-color: var(--primary-color);
    box-shadow: 0 0 30px rgba(255, 0, 80, 0.4);
}

.disc-art {
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background-image: repeating-radial-gradient(#111 0,
            #111 2px,
            #222 3px,
            #222 4px);
}

.disc-center {
    position: absolute;
    width: 80px;
    height: 80px;
    background: var(--primary-color);
    border-radius: 50%;
    border: 5px solid #000;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.song-info {
    margin-bottom: 30px;
    width: 80%;
}

.song-title {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--text-color);
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.song-artist {
    font-size: 1rem;
    color: var(--secondary-color);
    letter-spacing: 2px;
}

/* Progress Bar */
.progress-container {
    width: 80%;
    margin-bottom: 30px;
}

.progress {
    width: 100%;
    height: 6px;
    background: #333;
    position: relative;
    cursor: pointer;
    border-radius: 3px;
    overflow: hidden;
}

.progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--progress-width, 0%);
    background: var(--primary-color);
    box-shadow: 0 0 10px var(--primary-color);
    transition: width 0.1s linear;
}

.time-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--dim-color);
    margin-top: 8px;
    font-family: var(--font-mono);
}

/* Controls */
.player-controls {
    display: flex;
    gap: 30px;
    align-items: center;
}

.control-btn {
    background: transparent;
    border: 1px solid var(--dim-color);
    color: var(--text-color);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.control-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.control-btn:hover {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

.play-btn {
    width: 70px;
    height: 70px;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.play-btn:hover {
    background: rgba(255, 0, 80, 0.1);
    box-shadow: 0 0 20px rgba(255, 0, 80, 0.5);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Playlist Area */
.playlist-area {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Critical for nested flex scrolling */
    height: 100%;
    overflow: hidden;
    /* Ensure only the list scrolls */
}

.playlist-header {
    border-bottom: 1px solid var(--dim-color);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.playlist-tabs {
    display: flex;
    gap: 10px;
}

.playlist-tab {
    background: transparent;
    border: none;
    color: var(--dim-color);
    font-family: var(--font-display);
    font-size: 1rem;
    cursor: pointer;
    padding: 5px 10px;
    transition: all 0.3s;
}

.playlist-tab:hover,
.playlist-tab.active {
    color: var(--secondary-color);
    text-shadow: 0 0 5px var(--secondary-color);
}

.playlist-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px;
}

.playlist-item {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.playlist-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.playlist-item.active {
    background: rgba(255, 0, 80, 0.1);
    border-left: 3px solid var(--primary-color);
}

.playlist-item-info {
    display: flex;
    flex-direction: column;
}

.item-title {
    font-size: 0.9rem;
    color: var(--text-color);
    margin-bottom: 2px;
}

.item-artist {
    font-size: 0.7rem;
    color: var(--dim-color);
}

.item-duration {
    font-size: 0.8rem;
    color: var(--dim-color);
    font-family: var(--font-mono);
}

.playlist-item.active .item-title {
    color: var(--primary-color);
}

/* Responsive */
@media (max-width: 768px) {
    .hud-header {
        flex-direction: column;
        height: auto;
        padding: 10px;
        clip-path: none;
        border-bottom: 1px solid var(--primary-color);
    }

    .header-decoration {
        display: none;
    }

    .hud-nav {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .nav-btn {
        flex: 1;
        padding: 5px 10px;
        font-size: 0.9rem;
        text-align: center;
    }

    .hud-footer {
        flex-direction: column;
        height: auto;
        padding: 10px;
        gap: 10px;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Project Section */
.project-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.project-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.section-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-right: 20px;
}

.deco-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), transparent);
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.project-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(255, 0, 80, 0.4);
    border-color: var(--secondary-color);
}

.project-card:hover .project-title {
    color: var(--secondary-color);
    text-shadow: 0 0 5px var(--secondary-color);
}

/* Restored Project Styles */
.card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.8rem;
    color: var(--dim-color);
}

.project-status {
    color: var(--secondary-color);
}

.project-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--text-color);
}

.project-desc {
    font-size: 0.9rem;
    color: #aaa;
    margin-bottom: 15px;
    line-height: 1.4;
}

.project-tech {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.project-tech span {
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 2px;
}

.project-link {
    display: inline-block;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.9rem;
    border: 1px solid var(--primary-color);
    padding: 5px 15px;
    transition: all 0.3s;
}

.project-link:hover {
    background: var(--primary-color);
    color: #000;
}

/* Cyborg Section */
.cyborg-container {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 20px;
    height: 100%;
}

.cyborg-sidebar {
    display: flex;
    flex-direction: column;
}

.tool-search {
    margin-bottom: 20px;
}

#tool-search-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--primary-color);
    color: var(--text-color);
    padding: 10px;
    font-family: var(--font-mono);
    outline: none;
    transition: all 0.3s;
}

#tool-search-input:focus {
    box-shadow: 0 0 10px rgba(255, 0, 80, 0.3);
    background: rgba(255, 0, 80, 0.1);
}

.tool-categories {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cat-btn {
    background: transparent;
    border: 1px solid var(--dim-color);
    color: var(--dim-color);
    padding: 10px;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-display);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.cat-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: var(--primary-color);
    transform: scaleY(0);
    transition: transform 0.3s;
}

.cat-btn:hover::before,
.cat-btn.active::before {
    transform: scaleY(1);
}

.cat-btn:hover,
.cat-btn.active {
    background: rgba(255, 0, 80, 0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
    padding-left: 20px;
}

.cyborg-content {
    display: flex;
    flex-direction: column;
}

.tool-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    overflow-y: auto;
    padding-right: 5px;
}

.tool-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 20px 0;
    border-color: transparent var(--dim-color) transparent transparent;
    transition: border-color 0.3s;
}

.tool-card:hover {
    border-color: var(--secondary-color);
    background: rgba(0, 240, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

.tool-card:hover::before {
    border-color: transparent var(--secondary-color) transparent transparent;
}

.tool-card h4 {
    color: var(--text-color);
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.tool-card span {
    font-size: 0.7rem;
    color: var(--dim-color);
}

/* Tool Modal */
.tool-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.tool-modal.active {
    display: flex;
}

.modal-content {
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: #050505;
    border: 1px solid var(--primary-color);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--dim-color);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.modal-header h3 {
    color: var(--secondary-color);
}

#close-modal {
    background: transparent;
    border: none;
    color: var(--primary-color);
    font-size: 1.5rem;
    cursor: pointer;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 20px;
}

.modal-footer {
    border-top: 1px solid var(--dim-color);
    padding-top: 10px;
}

.output-area {
    background: #111;
    padding: 10px;
    border: 1px solid var(--dim-color);
}

.output-label {
    display: block;
    font-size: 0.7rem;
    color: var(--dim-color);
    margin-bottom: 5px;
}

.output-value {
    font-family: var(--font-mono);
    color: var(--secondary-color);
    word-break: break-all;
    margin-bottom: 10px;
}

.action-btn {
    background: var(--primary-color);
    color: #000;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-weight: bold;
}

.action-btn:hover {
    background: #fff;
}

/* Tool Inputs */
.tool-input-group {
    margin-bottom: 15px;
}

.tool-input-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.8rem;
    color: var(--dim-color);
}

.tool-input-group input,
.tool-input-group select,
.tool-input-group textarea {
    width: 100%;
    background: #111;
    border: 1px solid var(--dim-color);
    color: var(--text-color);
    padding: 8px;
    font-family: var(--font-mono);
}

.tool-btn {
    width: 100%;
    background: transparent;
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.tool-btn:hover {
    background: var(--secondary-color);
    color: #000;
}

/* Responsive Cyborg */
@media (max-width: 768px) {
    .cyborg-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .tool-categories {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .cat-btn {
        white-space: nowrap;
    }
}

/* Uplink Section */
.uplink-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.uplink-header {
    margin-bottom: 20px;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.uplink-stats {
    font-size: 0.8rem;
    color: var(--secondary-color);
}

.uplink-controls {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

#uplink-search {
    flex: 1;
    min-width: 200px;
    background: #111;
    border: 1px solid var(--dim-color);
    color: var(--text-color);
    padding: 8px;
    font-family: var(--font-mono);
}

.uplink-filters {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.filter-btn {
    background: transparent;
    border: 1px solid var(--dim-color);
    color: var(--dim-color);
    padding: 5px 10px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.3s;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--secondary-color);
    color: #000;
    border-color: var(--secondary-color);
}

.uplink-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    overflow-y: auto;
    padding-bottom: 20px;
}

.link-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    padding: 15px;
    text-decoration: none;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.link-card:hover {
    border-color: var(--primary-color);
    background: rgba(255, 0, 80, 0.1);
    transform: translateY(-2px);
}

.link-title {
    color: var(--text-color);
    font-weight: bold;
    margin-bottom: 5px;
    font-family: var(--font-display);
    font-size: 1.1rem;
}

.link-url {
    color: var(--dim-color);
    font-size: 0.7rem;
    word-break: break-all;
}

.link-cat {
    align-self: flex-end;
    font-size: 0.6rem;
    background: #222;
    padding: 2px 5px;
    border-radius: 2px;
    margin-top: 10px;
    color: var(--secondary-color);
}

/* Notes Section */
.notes-container {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 20px;
    height: 100%;
}

.notes-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.note-item {
    padding: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.9rem;
    color: var(--dim-color);
}

.note-item:hover,
.note-item.active {
    border-color: var(--secondary-color);
    background: rgba(0, 240, 255, 0.1);
    color: var(--text-color);
}

.notes-content {
    background: #e0e0e0;
    /* Paper color */
    color: #111;
    /* Ink color */
    padding: 40px;
    overflow-y: auto;
    font-family: 'Courier New', Courier, monospace;
    /* Typewriter font */
    position: relative;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.2);
}

.note-paper {
    max-width: 800px;
    margin: 0 auto;
}

.note-title {
    font-size: 2rem;
    border-bottom: 2px solid #333;
    margin-bottom: 10px;
    padding-bottom: 10px;
    text-transform: uppercase;
    color: #000;
}

.note-meta {
    font-size: 0.8rem;
    color: #555;
    margin-bottom: 30px;
    font-style: italic;
}

.note-body {
    line-height: 1.6;
    font-size: 1rem;
}

.note-body p {
    margin-bottom: 15px;
}

/* Responsive Notes */
@media (max-width: 768px) {
    .notes-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .notes-list {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .note-item {
        white-space: nowrap;
    }

    .notes-content {
        padding: 20px;
    }
}

/* =========================================
   COMPREHENSIVE RESPONSIVENESS
   ========================================= */

/* Global Image Responsiveness */
img {
    max-width: 100%;
    height: auto;
}

/* Tablet & Smaller Desktop (max-width: 1024px) */
@media (max-width: 1024px) {

    /* Poster: Adjust font size slightly */
    .poster-bg-text {
        font-size: 28vw;
    }

    /* HUD: Stack Status Grid */
    .status-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .col-profile,
    .col-info {
        width: 100%;
    }

    /* HUD: Profile Image Height Adjust */
    .profile-img-container {
        height: 400px;
        /* Taller on tablet to fill space */
    }
}

/* Mobile Devices (max-width: 768px) */
@media (max-width: 768px) {

    /* --- POSTER LAYOUT --- */
    .poster-bg-text {
        font-size: 22vw;
        /* Fit width */
        padding: 0 5px;
        flex-direction: row;
        /* Keep horizontal */
    }



    .poster-footer {
        flex-direction: row;
        justify-content: center;
        /* Center align */
        align-items: flex-end;
        text-align: center;
        bottom: 20px;
        padding: 0 20px;
        gap: 40px;
        /* Gap between items */
    }

    .footer-left,
    .footer-right {
        text-align: center;
        max-width: 45%;
    }

    .footer-right {
        text-align: center;
        /* Override right align */
    }

    /* Ensure desktop also has these styles if desired, but user asked specifically here? 
       "remove this descript left and roght and alway make image resposive fulll size all device" 
       was the previous prompt. 
       Let's apply the mask globally in the main block too if needed, but this valid for mobile/responsive block.
       Wait, I should check if the user wants this globally. "make it stay sentecer" usually implies globally.
       I will apply this to the main class as well. */

    .poster-footer h3 {
        font-size: 1.2rem;
        margin-bottom: 5px;
    }

    .poster-nav {
        bottom: 5px;
    }

    /* --- HUD LAYOUT --- */
    .hud-header {
        flex-direction: column;
        height: auto;
        padding: 10px;
        clip-path: none;
        border-bottom: 1px solid var(--primary-color);
    }

    .header-decoration {
        display: none;
    }

    .hud-nav {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 5px;
    }

    .nav-btn {
        flex: 1 1 30%;
        /* Grow to fill rows */
        padding: 8px 5px;
        font-size: 0.8rem;
        text-align: center;
        min-width: 80px;
    }

    .hud-footer {
        flex-direction: column;
        height: auto;
        padding: 15px;
        gap: 10px;
        text-align: center;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    /* Sections */
    .hud-section {
        padding-bottom: 60px;
        /* Space for scroll */
    }

    .profile-img-container {
        height: 300px;
        /* Standardize specific mobile height */
    }

    .glitch-text {
        font-size: 2rem;
    }

    /* Cyborg Mobile */
    .cyborg-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .tool-categories {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 5px;
        white-space: nowrap;
    }

    .cat-btn {
        padding: 8px 15px;
    }

    /* Notes Mobile Overrides */
    .notes-list {
        padding-bottom: 10px;
    }

    .note-item {
        background: #111;
        margin-right: 5px;
    }
}