/* --- GLOBAL UI LOCK --- */
html, body {
    /* Prevents the "I-beam" typing cursor from appearing over text */
    cursor: default;
    /* Prevents users from highlighting/selecting text everywhere */
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE/Edge */
}

/* --- RE-ENABLE POINTER FOR INTERACTIVE ELEMENTS --- */
/* This ensures your icons, links, and buttons still show the 'hand' cursor */
a, 
button, 
.socialContainer, 
.hover-link,
[role="button"] {
    cursor: pointer !important;
}
:root {
    --vscode-bg: #000000; 
    --vscode-sidebar: #111111;
    --vscode-tab-inactive: #1a1a1a;
    --vscode-tab-active: #000000;
    --vscode-border: #222222;
    --vscode-accent: #007acc;
    --vscode-text: #cccccc;
    --primary-color: #00ff75;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--vscode-bg);
    color: var(--vscode-text);
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* This ensures the outer "gap" matches the sidebar color */
    padding: 0; 
}

.app-wrapper { 
    display: flex; 
    height: 100vh; 
    width: 100vw; 
    border: 2px solid #007acc; 
    position: relative;
    overflow: hidden;
    box-sizing: border-box; 
}

/* SIDEBAR STYLES */
.tree-container {
    width: 220px; 
    background: var(--vscode-sidebar); 
    /* Keep this as a dark border so it doesn't fight with the outer blue boundary */
    border-right: 1px solid var(--vscode-border);
    overflow-y: auto; 
    flex-shrink: 0;
}
.tree-list-root { list-style: none; }
.tree-list-root ul { list-style: none; margin-left: 11px; padding-left: 11px; border-left: 1px solid #404040; }
.tree-item { position: relative; margin-top: 4px; }
.tree-label, .file-item {
    display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 4px;
    cursor: pointer; font-size: 13px; color: var(--vscode-text); user-select: none; height: 28px;
}
.file-item.is-selected { background: #37373d; color: #ffffff; }
.icon { width: 16px; height: 16px; color: var(--vscode-text); flex-shrink: 0; }
.folder-open-icon { display: none; }
.folder-closed-icon { display: block; }
.tree-toggle:checked ~ .tree-label .folder-open-icon { display: block; }
.tree-toggle:checked ~ .tree-label .folder-closed-icon { display: none; }
.tree-toggle { display: none; }
.tree-children-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-in-out; }
.tree-toggle:checked ~ .tree-children-wrapper { grid-template-rows: 1fr; }
.tree-children { overflow: hidden; }
/* EDITOR MAIN AREA */
.editor-container { flex-grow: 1; display: flex; flex-direction: column; background: var(--vscode-bg); overflow: hidden; }
.header { background: var(--vscode-sidebar); padding: 8px 16px; display: flex; align-items: center; }
.window-controls { display: flex; align-items: center; gap: 8px; }
.circle { width: 12px; height: 12px; border-radius: 50%; }
.red { background: #ff5f56; } .yellow { background: #ffbd2e; } .green { background: #27c93f; }

.tabs-bar { 
    display: flex; 
    background: var(--vscode-sidebar); 
    height: 35px; 
    border-bottom: 1px solid var(--vscode-border); 
}

.tab {
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    background: var(--vscode-tab-inactive); 
    padding: 0 12px; 
    color: #969696; 
    font-size: 13px; 
    cursor: pointer; 
    border-right: 1px solid var(--vscode-sidebar); 
    min-width: 140px; 
}

.tab.active { 
    background: var(--vscode-tab-active); 
    color: #ffffff; 
    border-top: 1px solid var(--vscode-accent); 
}

.tab i { 
    margin-right: 8px; 
}

.tab-close {
    margin-left: 8px; 
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 14px;
    visibility: hidden; 
}

/* Show X on hover for any tab */
.tab:hover .tab-close {
    visibility: visible;
}

/* NEW: Keep X visible permanently on the active tab */
.tab.active .tab-close {
    visibility: visible;
}

.tab-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.editor-wrapper {
    flex-grow: 1; 
    overflow-y: auto; 
    position: relative;
    width: 100%;
    height: 100%;

    background: #000000;
    /* Reduced from 5em to 2.5em for a tighter grid */
    --gap: 2.5em; 
    --line: 1px;
    --color: rgba(255, 255, 255, 0.12); 

    background-image: 
        linear-gradient(-90deg, transparent calc(var(--gap) - var(--line)), var(--color) var(--gap)),
        linear-gradient(0deg, transparent calc(var(--gap) - var(--line)), var(--color) var(--gap));
    background-size: var(--gap) var(--gap);
}
.file-pane { 
    display: none; 
    height: 100%; 
    width: 100%;
    position: relative; /* This is the anchor point */
    overflow-y: auto;   /* Allows scrolling if text is long */
    overflow-x: hidden; 
}

.file-pane.active { display: block; }

/* INTRO LAYOUT (Card on Left, Text on Right) */
.intro-layout {
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 80px; height: 100%; width: 100%; padding: 40px; box-sizing: border-box;
}
.intro-left-card { flex-shrink: 0; }
.intro-right-text { flex: 1; max-width: 600px; }

.intro-text h1 { font-size: 3.5rem; color: #fff; margin-bottom: 10px; }
.intro-text h2 { font-size: 1.8rem; color: #00ff75; margin-bottom: 20px; }
.intro-text p { font-size: 1.1rem; color: #aaa; line-height: 1.6; margin-bottom: 25px; }
.cmd-line { background: #000; padding: 12px 20px; border-radius: 6px; border: 1px solid var(--vscode-border); font-family: monospace; }

/* NEW PERMANENT GRADIENT PROFILE CARD */
.profile-gradient-card {
    width: 300px;  
    height: 400px; 
    background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);
    border-radius: 200px;
    box-shadow: 0px 0px 30px 1px rgba(0, 255, 117, 0.30); 
    padding: 3px; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-card-inner {
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    border-radius: 18px; /* Permanent inner radius */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
}

.profile-img-container {
    width: 140px;  
    height: 140px; 
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #00ff75;
    margin-bottom: 15px;
}

.profile-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ISOLATED SOCIAL WHEEL */
.isolated-wheel-container {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 9000; /* Stays above intro content, but below terminal */
}

.sw-wrapper { display: flex; flex-direction: column; gap: 6px; }
.sw-row { display: flex; flex-direction: row; gap: 6px; }

.sw-btn {
    width: 80px; height: 80px; background: white; border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4); transition: 0.2s ease-in-out;
    display: flex; align-items: center; justify-content: center; cursor: pointer; outline: none;
}

.sw-whatsapp { border-radius: 80px 8px 8px 8px; }
.sw-linkedin { border-radius: 8px 80px 8px 8px; }
.sw-github { border-radius: 8px 8px 8px 80px; }
.sw-gmail { border-radius: 8px 8px 80px 8px; }

.sw-btn svg { width: 32px; height: 32px; transition: fill 0.2s; }
.sw-whatsapp svg { fill: #00ff75; margin: 15px 0 0 15px; }
.sw-linkedin svg { fill: #0077b5; margin: 15px 15px 0 0; }
.sw-github svg { fill: #333; margin: 0 0 15px 15px; }
.sw-gmail svg { fill: #EA4335; margin: 0 15px 15px 0; }

.sw-btn:hover { transform: scale(1.1); z-index: 10; }
.sw-whatsapp:hover { background-color: #00ff75; }
.sw-linkedin:hover { background-color: #0077b5; }
.sw-github:hover { background-color: #000; }
.sw-gmail:hover { background-color: #EA4335; }
.sw-btn:hover svg { fill: white; }


/* PROJECTS & CONTENT CSS */
.page-section { padding: 3rem 0; }
.section-banner { background: var(--primary-color); width: 100%; padding: 1.5rem 8%; margin-bottom: 3rem; border-left: 4px solid var(--vscode-accent); }
.section-banner h2 { color: #fff; font-size: 2rem; font-weight: 300; letter-spacing: 2px; }
.content-block { padding: 0 8%; }
.uiverse-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; }

/* Renamed project card class to avoid conflicts */
.project-card { position: relative; width: 300px; height: 400px; border-radius: 10px; overflow: hidden; background: #1a1a1a; transition: transform 0.5s; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.project-card__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #2d2d2d; }
.project-card__content { position: absolute; top: 100%; left: 0; width: 100%; height: 100%; padding: 25px; background: #fff; transition: 0.5s; display: flex; flex-direction: column; justify-content: center; }
.project-card:hover .project-card__content { transform: translateY(-100%); }
.project-card__title { font-size: 22px; font-weight: bold; color: #111; margin-bottom: 10px; }
.project-card__text { font-size: 14px; color: #444; margin-bottom: 20px; line-height: 1.5; }
.project-card__buttons { display: flex; gap: 10px; }
.project-card__button { padding: 8px 15px; background: #000; color: #fff; text-decoration: none; border-radius: 5px; font-size: 12px; font-weight: 600; }

.tech-tags span { display: inline-block; background: #2d2d2d; color: var(--vscode-accent); padding: 4px 10px; border-radius: 4px; font-size: 12px; margin-right: 5px; margin-top: 5px;}

/* TERMINAL PANEL */
.terminal-panel { background: var(--vscode-bg); border-top: 1px solid var(--vscode-border); z-index: 9999; position: relative; }
.terminal-toggle { height: 28px; background: #007acc; color: #fff; display: flex; align-items: center; padding: 0 15px; font-size: 12px; cursor: pointer; gap: 8px; }
.terminal-content-wrapper { height: 0; overflow: hidden; transition: height 0.3s; }
.terminal-content-wrapper.open { height: 180px; }
.terminal-inner { padding: 15px 20px; color: #ccc; font-size: 13px; height: 100%; overflow-y: auto; background: #111; font-family: monospace; }
.term-path { color: var(--primary-color); margin-right: 8px; }
.typewriter-text { color: #e34ba9; border-right: 2px solid; animation: typing 3s infinite; white-space: nowrap; overflow: hidden; display: inline-block; vertical-align: bottom;}
@keyframes typing { from { width: 0 } to { width: 150px } }

/* MOBILE RESPONSIVENESS */
@media (max-width: 900px) {
    .app-wrapper { flex-direction: column; }
    .tree-container { width: 100%; height: auto; max-height: 250px; border-right: none; border-bottom: 1px solid var(--vscode-border); }
    .intro-layout { flex-direction: column; text-align: center; gap: 40px; padding-top: 20px;}
    .isolated-wheel-container { position: relative; bottom: auto; right: auto; margin: 30px auto; display: flex; justify-content: center; }
}

/* --- GLOWING SKILLS GRID CSS --- */
.skills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: flex-start;
    max-width: 1100px;
}
.skill-category h3 {
    font-family: 'Consolas', 'Courier New', monospace;
    color: #6a9955; 
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
    /* REMOVED: border-bottom: 1px solid #333; */
    display: flex;
    align-items: center;
}

.skill-category h3::before {
    content: "/* ";
    opacity: 0.5;
}

.skill-category h3::after {
    content: " */";
    opacity: 0.5;
}

.section-banner {
    background: #252526; 
    width: 100%;
    padding: 1rem 8%;
    margin-bottom: 3rem;
    border-left: 5px solid var(--primary-color);
    border-bottom: 1px solid var(--vscode-border);
}

.section-banner h2 {
    color: var(--primary-color);
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.term-path {
    color: var(--primary-color);
    margin-right: 8px;
}

.light-button button.bt {
    position: relative;
    height: 180px; /* Slightly reduced so it fits nicely inside the file-pane */
    display: flex;
    align-items: flex-end;
    outline: none;
    background: none;
    border: none;
    cursor: pointer;
}

.light-button button.bt .button-holder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100px;
    width: 100px;
    background-color: #111; /* Matched closer to VS Code theme */
    border-radius: 5px;
    color: #555; /* Dimmed state */
    font-weight: 700;
    transition: 300ms;
    outline: #111 2px solid;
    outline-offset: 20px;
    gap: 12px;
}

.light-button button.bt .button-holder svg {
    height: 44px;
    fill: #555;
    transition: fill 300ms;
}

.light-button button.bt .button-holder p {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: color 300ms;
}

.light-button button.bt .light-holder {
    position: absolute;
    height: 180px;
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.light-button button.bt .light-holder .dot {
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    background-color: #0a0a0a;
    border-radius: 10px;
    z-index: 2;
}

.light-button button.bt .light-holder .light {
    position: absolute;
    top: 0;
    width: 200px;
    height: 200px;
    clip-path: polygon(50% 0%, 25% 100%, 75% 100%);
    background: transparent;
}

/* HOVER THEMES - Using the exact ones provided, mapped to buttons */
/* --- PERMANENT SKILL THEMES (FIXED) --- */
/* --- PERMANENT SKILL THEMES (FIXED) --- */

.lb-html button.bt .button-holder svg { fill: #E34F26; } 
.lb-html button.bt .button-holder { color: #E34F26; outline: #E34F26 2px solid; outline-offset: 2px; } 
.lb-html button.bt .light-holder .light { background: linear-gradient(180deg, #E34F26 0%, transparent 75%); }


.lb-css button.bt .button-holder svg { fill: #061dca; } 
.lb-css button.bt .button-holder { color: #061dca; outline: #061dca 2px solid; outline-offset: 2px; } 
.lb-css button.bt .light-holder .light { background: linear-gradient(180deg, #061dca 0%, transparent 75%); }




.lb-cpp button.bt .button-holder svg { fill:#00599C; } 
.lb-cpp button.bt .button-holder { color:#00599C; outline:#00599C 2px solid; outline-offset:2px; } 
.lb-cpp button.bt .light-holder .light { background:linear-gradient(180deg,#00599C 0%,transparent 75%); }

.lb-js button.bt .button-holder svg { fill:#F7DF1E; } 
.lb-js button.bt .button-holder { color:#F7DF1E; outline:#F7DF1E 2px solid; outline-offset:2px; } 
.lb-js button.bt .light-holder .light { background:linear-gradient(180deg,#F7DF1E 0%,transparent 75%); }

.lb-python button.bt .button-holder svg { fill:#3776AB; } 
.lb-python button.bt .button-holder { color:#3776AB; outline:#3776AB 2px solid; outline-offset:2px; } 
.lb-python button.bt .light-holder .light { background:linear-gradient(180deg,#3776AB 0%,transparent 75%); }

.lb-mongo button.bt .button-holder svg { fill:#47A248; } 
.lb-mongo button.bt .button-holder { color:#47A248; outline:#47A248 2px solid; outline-offset:2px; } 
.lb-mongo button.bt .light-holder .light { background:linear-gradient(180deg,#47A248 0%,transparent 75%); }

.lb-redis button.bt .button-holder svg { fill:#FF4438; } 
.lb-redis button.bt .button-holder { color:#FF4438; outline:#FF4438 2px solid; outline-offset:2px; } 
.lb-redis button.bt .light-holder .light { background:linear-gradient(180deg,#FF4438 0%,transparent 75%); }

.lb-node button.bt .button-holder svg { fill:#339933; } 
.lb-node button.bt .button-holder { color:#339933; outline:#339933 2px solid; outline-offset:2px; } 
.lb-node button.bt .light-holder .light { background:linear-gradient(180deg,#339933 0%,transparent 75%); }

.lb-express button.bt .button-holder svg { fill:#eeeeee; } 
.lb-express button.bt .button-holder { color:#eeeeee; outline:#eeeeee 2px solid; outline-offset:2px; } 
.lb-express button.bt .light-holder .light { background:linear-gradient(180deg,#eeeeee 0%,transparent 75%); }

.lb-react button.bt .button-holder svg { fill:#61DAFB; } 
.lb-react button.bt .button-holder { color:#61DAFB; outline:#61DAFB 2px solid; outline-offset:2px; } 
.lb-react button.bt .light-holder .light { background:linear-gradient(180deg,#61DAFB 0%,transparent 75%); }

.lb-docker button.bt .button-holder svg { fill:#2496ED; } 
.lb-docker button.bt .button-holder { color:#2496ED; outline:#2496ED 2px solid; outline-offset:2px; } 
.lb-docker button.bt .light-holder .light { background:linear-gradient(180deg,#2496ED 0%,transparent 75%); }

.lb-git button.bt .button-holder svg { fill:#F05032; } 
.lb-git button.bt .button-holder { color:#F05032; outline:#F05032 2px solid; outline-offset:2px; } 
.lb-git button.bt .light-holder .light { background:linear-gradient(180deg,#F05032 0%,transparent 75%); }

.lb-postman button.bt .button-holder svg { fill:#FF6C37; } 
.lb-postman button.bt .button-holder { color:#FF6C37; outline:#FF6C37 2px solid; outline-offset:2px; } 
.lb-postman button.bt .light-holder .light { background:linear-gradient(180deg,#FF6C37 0%,transparent 75%); }

.lb-jwt button.bt .button-holder svg { fill:#FB015B; } 
.lb-jwt button.bt .button-holder { color:#FB015B; outline:#FB015B 2px solid; outline-offset:2px; } 
.lb-jwt button.bt .light-holder .light { background:linear-gradient(180deg,#FB015B 0%,transparent 75%); }

.lb-clerk button.bt .button-holder svg { fill:#6C47FF; } 
.lb-clerk button.bt .button-holder { color:#6C47FF; outline:#6C47FF 2px solid; outline-offset:2px; } 
.lb-clerk button.bt .light-holder .light { background:linear-gradient(180deg,#6C47FF 0%,transparent 75%); }

.lb-razorpay button.bt .button-holder svg { fill:#072654; } 
.lb-razorpay button.bt .button-holder { color:#072654; outline:#072654 2px solid; outline-offset:2px; } 
.lb-razorpay button.bt .light-holder .light { background:linear-gradient(180deg,#072654 0%,transparent 75%); }

.lb-cloudinary button.bt .button-holder svg { fill:#3448C5; } 
.lb-cloudinary button.bt .button-holder { color:#3448C5; outline:#3448C5 2px solid; outline-offset:2px; } 
.lb-cloudinary button.bt .light-holder .light { background:linear-gradient(180deg,#3448C5 0%,transparent 75%); }

.lb-cf button.bt .button-holder svg { fill:#1F8ACB; } 
.lb-cf button.bt .button-holder { color:#1F8ACB; outline:#1F8ACB 2px solid; outline-offset:2px; } 
.lb-cf button.bt .light-holder .light { background:linear-gradient(180deg,#1F8ACB 0%,transparent 75%); }

.lb-lc button.bt .button-holder svg { fill:#FFA116; } 
.lb-lc button.bt .button-holder { color:#FFA116; outline:#FFA116 2px solid; outline-offset:2px; } 
.lb-lc button.bt .light-holder .light { background:linear-gradient(180deg,#FFA116 0%,transparent 75%); }

.lb-redux button.bt .button-holder svg { fill: #764ABC; } 
.lb-redux button.bt .button-holder { color: #764ABC; outline: #764ABC 2px solid; outline-offset: 2px; } 
.lb-redux button.bt .light-holder .light { background: linear-gradient(180deg, #764ABC 0%, transparent 75%); }

/* --- VS Code Active Pane Border --- */
.tree-container:focus-within,
.editor-container:focus-within,
.terminal-panel:focus-within,
.terminal-panel:hover {
    outline: 1px solid #007acc;
    outline-offset: -1px;
}

/* Optional: Make the terminal toggle tab look connected when active */
.terminal-panel:focus-within .terminal-toggle,
.terminal-panel:hover .terminal-toggle {
    background-color: #005f9e;
}
.tree-container {
    border-right: 1px solid #007acc !important;
}

.editor-container {
    border-left: 1px solid #007acc !important; 
    box-shadow: inset 1px 0 0 #007acc;
}

.terminal-panel {
    border-top: 1px solid #007acc !important;
}


/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
    display: none;
}

*{
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}


.file-pane {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}


/* --- ISOLATED 3D CUBE (Fixed to Bottom Right) --- */
.isolated-cube-container {
    position: fixed;
    bottom: 250px; /* Adjust this to move it up or down */
    right: 150px;  /* Adjust this to move it left or right */
    z-index: 900;
    
    /* Shrinks the cube strictly into the corner without invisible margins */
    transform: scale(0.65);
    transform-origin: bottom right; 
    pointer-events: auto;
}

@keyframes cube-hue-rotate {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

.cube-container {
    position: relative;
    transform: skewY(-20deg);
    animation: cube-hue-rotate 5s linear infinite;
}

.cube-container .cube {
    position: relative;
    z-index: 2;
}

.cube-container .cube:nth-child(2) {
    z-index: 1;
    transform: translate(-60px, -60px);
}

.cube-container .cube:nth-child(3) {
    z-index: 3;
    transform: translate(60px, 60px);
}

.cube-container .cube div {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 30px;
    transform: translate(calc(-70px * var(--x)), calc(-60px * var(--y)));
}

.cube-container .cube div span {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #dcdcdc;
    z-index: calc(1 * var(--i));
    transition: 1.5s;
}

/* --- HOVER EFFECTS (Front and Sides) --- */
.cube-container .cube div span:hover,
.cube-container .cube div span:hover::before,
.cube-container .cube div span:hover::after {
    background: #ef4149 !important;
    filter: drop-shadow(0 0 30px #ef4149);
    transition: 0s;
}

.cube-container .cube div span::before {
    content: "";
    position: absolute;
    left: -40px;
    width: 40px;
    height: 100%;
    background: #fff;
    transform-origin: right;
    transform: skewY(45deg);
    transition: 1.5s;
}

.cube-container .cube div span::after {
    content: "";
    position: absolute;
    top: -40px;
    left: 0px;
    width: 100%;
    height: 40px;
    background: #f2f2f2;
    transform-origin: bottom;
    transform: skewX(45deg);
    transition: 1.5s;
}

/* --- ABOUT TEXT TYPOGRAPHY --- */
.about-text {
    max-width: 800px;
}

.about-text p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.15rem;
    line-height: 1.8;
    color: #cccccc;
    margin-bottom: 24px;
}

/* Monospace highlighting for tech stack */
.tech-tag {
    font-family: 'Consolas', 'Courier New', monospace;
    color: #00ff75; /* Your primary neon green */
    background: rgba(0, 255, 117, 0.08);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(0, 255, 117, 0.2);
    font-size: 1rem;
}

/* Light blue for concepts (like VS Code variables) */
.keyword-blue {
    color: #61afef; 
    font-weight: 600;
}

/* Pink for numbers/data (like VS Code numbers) */
.keyword-pink {
    font-family: 'Consolas', 'Courier New', monospace;
    color: #d19a66; /* VS Code Orange/Gold for numbers */
    font-weight: bold;
    font-size: 1.2rem;
}

/* Cool terminal effect for the final sentence */
.terminal-prompt {
    font-family: 'Consolas', 'Courier New', monospace !important;
    color: #56b6c2 !important; 
    margin-top: 40px;
}

.cursor-blink {
    animation: blink 1s step-end infinite;
    color: #00ff75;
}

@keyframes blink {
    50% { opacity: 0; }
}
/* --- CONTACT LAYOUT --- */
.contact-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    margin-top: 50px;
    flex-wrap: wrap; 
    gap: 40px;
}

/* --- CONTACT UI CARD (Left) --- */
.contact-card {
    background-color: #080808; /* Dark mode to match VS Code theme */
    border: 1px solid #222;
    border-radius: 12px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.contact-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.contact-text {
    color: #cccccc;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 1.1rem;
    transition: color 0.3s;
}

/* --- Unique Text Hover Colors for each Contact Row --- */
.contact-row:has(.containerOne):hover .contact-text {
    color: #25d366; /* Phone/WhatsApp Green */
    text-shadow: 0 0 8px rgba(37, 211, 102, 0.4);
}

.contact-row:has(.containerTwo):hover .contact-text {
    color: #EA4335; /* Email Red */
    text-shadow: 0 0 8px rgba(234, 67, 53, 0.4);
}

.contact-row:has(.containerThree):hover .contact-text {
    color: #4d5156; 
    text-shadow: 0 0 10px rgba(139, 148, 158, 0.5);
}

.contact-row:has(.containerFour):hover .contact-text {
    color: #0072b1; /* LinkedIn Blue */
    text-shadow: 0 0 8px rgba(0, 114, 177, 0.4);
}

/* Icons */
.socialContainer {
    width: 52px;
    height: 52px;
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px; /* Slightly rounded to match theme */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition-duration: 0.3s;
    cursor: pointer;
}

/* Hover Colors based on the new Icons */
.containerOne:hover { background-color: #25d366; transition-duration: 0.3s; transform: scale(1.5); border-radius: 15px;} /* Phone/Whatsapp Green */
.containerTwo:hover { background-color: #EA4335; transition-duration: 0.3s; transform: scale(1.5); border-radius: 15px;} /* Email Red */
.containerThree:hover { background-color: #333333; transition-duration: 0.3s; transform: scale(1.5); border-radius: 15px;} /* Github Black/Grey */
.containerFour:hover { background-color: #0072b1; transition-duration: 0.3s; transform: scale(1.5); border-radius: 15px;} /* LinkedIn Blue */

.socialContainer:active { transform: scale(0.9); transition-duration: 0.3s; }
.socialSvg { width: 20px; }
.socialSvg path { fill: rgb(255, 255, 255); }
.socialContainer:hover .socialSvg { animation: slide-in-top 0.3s both; }

@keyframes slide-in-top {
    0% { transform: translateY(50px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Dim others when one is hovered */
.contact-card:has(.socialContainer:hover) .socialContainer:not(:hover) {
    opacity: 0.2;
}

/* --- BO CHAN CSS ART (Right) --- */
.bo {
    z-index: 10;
    transform: scale(0.8); /* Replaced zoom: 0.8 for cross-browser support */
    transform-origin: center;
}

.face {
    position: relative;
    width: 300px;
    height: 350px;
    background: linear-gradient(180deg,#452824 184px,#f2bbad 34px);
    border-top-right-radius: 250px 350px;
    border-top-left-radius: 250px 350px;
    border-bottom-left-radius: 250px 250px;
    border-bottom-right-radius: 250px 250px;
    border: 5px solid black;
}

.hairs { height: 180px; background-color: #f2bbad; position: absolute; width: 290px; border-top-right-radius: 250px 350px; border-top-left-radius: 250px 350px; top: 25px; }
.snow { transform: translateX(150px); transform-origin: right; }
.mountain-cap-1, .mountain-cap-2, .mountain-cap-3,.mountain-cap-4 { position: absolute; top: 20px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 40px solid #452824; }
.mountain-cap-1 { left: -65px; } .mountain-cap-2 { left: -35px; } .mountain-cap-3 { left: -5px; } .mountain-cap-4 { left: 25px; }

.earL { border-radius: 50%; height: 70px; width: 50px; background-color: #f2bbad; position: absolute; left: -30px; top: 150px; z-index: -1; border: 5px solid black; }
.earR { border-radius: 50%; height: 70px; width: 50px; background-color: #f2bbad; position: absolute; right: -30px; top: 150px; z-index: -4; border: 5px solid black; }

.eyeR, .eyeL { border-radius: 50%; height: 10px; width: 10px; background-color: black; position: absolute; top: 120px; z-index: 2; }
.eyeR { left: 128px; animation: blinkR 5s infinite linear; }
.eyeL { right: 128px; animation: blinkL 5s infinite linear; }

.nose { background: #fefefe; width: 20px; height: 20px; border-radius: 50%; position: absolute; top: 220px; left: 140px; transition: all ease-in-out .3s; z-index: 100; }
.nose:hover { transform: scale(1, 1.25); top: 236px; }
.nose:active { animation: propeller .5s infinite linear; transform-origin: 50% -55px; top: 220px; animation-delay: .5s; }
.nose:before { content: ""; position: absolute; top: -64px; left: 50%; border: 10px solid transparent; border-bottom: 62px solid #fefefe; transform: translateX(-50%); }

.mouth { position: absolute; top: 300px; left: 140px; background: #a36655; width: 25px; height: 18px; border: 5px solid black; border-radius: 50%; transition: all .3s linear; }
.face:active .mouth { top: 290px; width: 60px; height: 25px; left: 123px; border-radius: 7px 7px 130px 130px; }
.face:active .smileL, .face:active .smileR { height: 30px; width: 30px; }

.smileL, .smileR { position: absolute; height: 0px; width: 0px; rotate: 310deg; top: 180px; transition: all .1s linear; }
.smileL { left: 70px; } .smileR { right: 70px; }

@keyframes propeller { to { transform: rotateZ(360deg); } }
@keyframes blinkL { 98% { height: 10px; width: 10px; right: 128px; top: 120px; } 100% { height: 3px; width: 11px; right: 126px; top: 123px; } }
@keyframes blinkR { 98% { height: 10px; width: 10px; left: 128px; top: 120px; } 100% { height: 3px; width: 11px; left: 126px; top: 123px; } }


/* --- LeetCode Brand Yellow --- */
.rank-leetcode-yellow {
    color: #FFA116; /* Official LeetCode Yellow */
    font-weight: 700;
}

/* Updated Knight Color (Deep Blue) */
.rank-knight {
    color: #5b92e5; 
    font-weight: 700;
}

/* Updated Specialist Color (Cyan) */
.rank-specialist {
    color: #03a89e; 
    font-weight: 700;
}

/* Reusing the hover-link logic we built earlier */
.hover-link {
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.hover-link:hover {
    text-decoration: underline;
    filter: drop-shadow(0 0 5px currentColor);
}


.sidebar-header {
    display: flex;
    align-items: center;
    padding: 10px 15px; 
    gap: 8px;
}

.vscode-logo {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important; /* Prevents flexbox from squishing it */
    object-fit: contain;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4)); 
}

.sidebar-title {
    color: #999999;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
}


/* --- CUSTOM PREMIUM PROJECT CARDS --- */
.projects-feed {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 20px 0 40px 0;
    align-items: center;
}

.custom-card {
    position: relative;
    width: 100%;
    max-width: 850px; /* Keeps it from getting ridiculously huge on ultrawide monitors */
    background: #111;
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.custom-card-img {
    width: 100%;
    height: auto;
    display: block; /* Ensures no weird gaps at the bottom */
}

/* The "Second Slide" Overlay */
.custom-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* The Glassmorphism Blur Effect */
    background: rgba(15, 15, 15, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Center the text nicely inside the slide */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 50px;
    
    /* The Slide Animation */
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* When the user hovers over the card, slide the overlay to 0% */
.custom-card:hover .custom-card-overlay {
    transform: translateY(0);
}

/* Overlay Typography & Buttons */
.custom-card-title {
    color: #00ff75;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.custom-card-text {
    color: #e0e0e0;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 25px;
    padding-left: 20px;
}

.custom-card-text li {
    margin-bottom: 8px;
}

.custom-card-links {
    display: flex;
    gap: 25px;
}

.custom-icon-btn {
    color: white;
    font-size: 1.6rem;
    transition: color 0.2s ease, transform 0.2s ease;
}

.custom-icon-btn:hover {
    color: #00ff75;
    transform: translateY(-3px); /* Little bounce effect on hover */
}