/* Utility: completely hide elements marked as hidden (e.g., locked Secret tab) */
.hidden { display: none !important; }

:root {
    --color-main-background: #1b1d22;          /* Dark background base */
    --accent-color: #e63946;        /* NES red accent */
    --highlight-color: #64ffda;         /* Neon aqua accent */
    --dark-panel-bg: #111318;           /* Panel background */
    --text-light-ink: #e5e7eb;             /* Light ink for text/borders */
    /* Reusable sizes and shadows */
    --border-2: 2px solid #000;
    --border-3: 3px solid #000;
    --radius-6: 6px;
    --radius-8: 8px;
    --radius-10: 10px;
    --radius-12: 12px;
    --radius-14: 14px;
    --panel-radius: 30px;
    --shadow-press: 0 3px 0 #000;
    --shadow-elev-16: 0 6px 0 #000, 0 10px 16px rgba(0,0,0,0.5);
    --shadow-elev-18: 0 6px 0 #000, 0 10px 18px rgba(0,0,0,0.5);
    --surface-dark: #2a2d34;

    --carousel-gutter: 60px;         /* space to avoid content under prev/next buttons */
    --carousel-gutter-sm: 70px;      /* slightly larger on phones to fully clear controls */
    --panel-fixed-height: auto;     /* uniform panel height */
    --cta-reserved: 0px; /* no extra space needed; CTA is inside footer */
    --footer-reserve: 125px; /* space so content not hidden behind fixed footer */

    --skill-bar-duration: 1100ms; /* slightly longer for visible decel */
    --skill-bar-ease: cubic-bezier(0.05, 0.9, 0.25, 1); /* rapid start, soft glide-in */
    --pixel-font: 'Press Start 2P', cursive;
}

@media (max-width: 700px) {
    :root { 
        --panel-fixed-height: auto; 
        --cta-reserved: 0px; /* footer handles layout */
    }
}

@font-face {
    font-family: 'Press Start 2P';
    src: url('fonts/PressStart2P-Regular.ttf') format('truetype');
}

/* Remove obsolete .fancy-border visuals (kept empty for backward-compatibility if left in markup) */
.fancy-border { border: 0; box-shadow: none; background: transparent; }

/* Enhance tab-content panels to replace previous frame */
.tab-content {
    display: none;
    border-radius: 0 0 var(--panel-radius) var(--panel-radius);
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 4px);
    color: #ffffff;
    border: 0;
    box-shadow: var(--shadow-elev-18),
        inset 0 0 0 3px #000,
        inset 0 0 0 6px rgba(230,57,70,0.14);
    padding: 12px 18px 18px;
    overflow: hidden;
    min-height: var(--panel-fixed-height, auto);
}

/* Normalize inner element padding inside panels */
.tab-content h3,
.tab-content p,
.tab-content ul,
.tab-content ol,
.tab-content li { padding-left: 8px; padding-right: 8px; }

/* Normalize inner child widths so all panels appear the same width */
.tab-content > * { width: 100%; box-sizing: border-box; }

/* Tighten paragraph rhythm and ensure wrapping */
.tab-content p {
    color: var(--text-light-ink);
    line-height: 1.5;                /* was global 2; tighter for readability */
    padding: 10px 0;                /* rely on panel padding for sides */
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

/* Lists: safe wrapping and compact spacing */
.tab-content li {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    margin: 0.15rem 0;               /* slightly tighter list spacing */
}

/* Links: prevent overflow on long URLs */
.tab-content a { overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }

/* Media inside panels are responsive */
.tab-content img, .tab-content video { max-width: 100%; height: auto; border-radius: 6px; }

/* Headings inside panels: compact spacing */
.tab-content h3 { padding: 6px 0 6px; margin: 0 0 4px; }

/* Nav container gets subtle outer frame */
nav {
    display: flex;                   /* single row, flexible */
    align-content: center;
    justify-content: center;
    align-items: center;
    padding: 6px;
    margin: 0px;
    width: 95%;
    max-width: 800px;
    gap: 6px;
    flex-wrap: nowrap;               /* single row always */

    background: transparent;
    border: 0;
    box-shadow: 0 6px 0 #000, 0 8px 14px rgba(0,0,0,0.45);
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: var(--radius-14);
}

/* Removed duplicate earlier/later nav blocks; merged above */

/* Section: combine duplicate transition declarations and remove justify-items (not used in flex) */
section {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    padding: 0px 0px 20px 0px;
    margin: 10px auto;
    transition: background-color 0.3s ease, transform 0.5s ease;
    width: 95%;
    max-width: 800px;
    z-index: 1; /* ensure above scanlines */
}

/* Body: remove justify-items (not applicable to flex) */
body {
    font-size: 1rem;

    /* Layered dark background with subtle vignettes */
    background:
      radial-gradient(1200px 600px at 0% 0%, rgba(230, 57, 70, 0.12), transparent 60%),
      radial-gradient(1000px 500px at 100% 100%, rgba(100, 255, 218, 0.10), transparent 55%),
      linear-gradient(90deg, #0b0c10, #15171e 50%, #0b0c10);
    background-size: cover;

    animation: none; /* remove previous gradient animation */

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start; /* normal vertical flow */
    align-items: center;
    align-content: center;
    margin: 5px;
    padding: 1px 0px;
    position: relative;
    padding-bottom: calc(var(--footer-reserve) + 6px); /* reserve space for fixed footer */

    min-height: 100vh; /* ensure at least viewport height */

    /* Stretch layered background to the viewport and prevent repeating */
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100vw 100vh, 100vw 100vh, 100vw 100vh; /* one size per layer */
}

/* Center content within main */
main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* center children horizontally */
    justify-content: flex-start; /* keep normal vertical flow */
    padding-bottom: 0; /* no reserve; footer contains CTA */
    flex: 1 0 auto; /* Ensure main grows to fill leftover space so footer sits at bottom */
}

/* Ensure footer content isn't hidden behind CTA bar */
footer { /* updated: ensure fixed at bottom */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 0;
    flex-shrink: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 0;
    background: rgba(17, 19, 24, 0.6);
    backdrop-filter: blur(3px);
    border-top: var(--border-3);
    box-shadow: 0 -6px 14px rgba(0,0,0,0.35);
}

footer h4 {
    padding: 0; /* reduce padding */
    margin: 0px; /* tighter spacing */
    color: var(--text-light-ink);
    font-size: 0.95rem; /* slightly smaller */
    line-height: 1.25; /* condensed */
    letter-spacing: 0.2px;
    font-weight: 600;
}

footer small {
    padding: 0; /* reduce padding */
    margin: 0px; /* tighter spacing */
    color: var(--text-light-ink);
    font-size: 0.85rem; /* slightly smaller */
    line-height: 1.25; /* condensed */
    letter-spacing: 0.2px;
    font-weight: 400;
    opacity: 0.7; /* slightly subdued */
}

/* CRT scanline overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.03) 0px,
        rgba(255, 255, 255, 0.03) 1px,
        transparent 1px,
        transparent 3px
    );
    mix-blend-mode: overlay;
    opacity: 0.25;
}

/* Pixel-styled tab buttons */
.tab-link {
    /* font-family via group */
    background: var(--surface-dark);
    color: var(--text-light-ink);
    border: var(--border-3);
    border-radius: var(--radius-8);
    padding: 6px 4px;
    margin: 0;
    text-align: center;
    /* text-transform via group */
    letter-spacing: 0.4px;
    font-size: clamp(0.78rem, 1.6vw, 0.9rem);
    box-shadow: 0 3px 0 #000, 0 5px 10px rgba(0,0,0,0.5);
    transition: transform 0.05s ease, box-shadow 0.05s ease;
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tab-link:hover, .tab-link:focus {
    transform: translateY(1px);
    box-shadow: 0 2px 0 #000, 0 3px 8px rgba(0,0,0,0.5);
}

/* Visual state for active tab */
.tab-link[aria-selected="true"] {
    background: var(--accent-color);
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 3px 0 #5f0b12, 0 5px 10px rgba(0,0,0,0.6);
}

/* Consolidate: keep a single tab-content definition above; ensure active state is here once */
.tab-content.active { display: block; }

/* Skills and Contact sizing fixes */
#skills .skills-list { width: 100%; }
#contact form input,
#contact form textarea { width: 100%; max-width: 100%; box-sizing: border-box; }

/* Remove lateral margin on skills list to match form/content width */
.skills-list { margin: 0 0 16px; }

/* Align form horizontal padding with panel (was adding extra narrowing effect) */
.tab-content form { padding-left: 0; padding-right: 0; }

/* Ensure lists inside panels don't add side margins */
.tab-content ul, .tab-content ol { margin-left: 0; margin-right: 0; }

/* Skills: remove extra horizontal padding so width matches other panels */
.skills-filters { padding-left: 0; padding-right: 0; }

/* Contact: ensure form spans full interior width without side padding conflicts */
#contact form { padding-left: 0; padding-right: 0; width: 100%; }

/* Make Skills and Contact inner blocks visually span same width as other panels */
#skills .skills-filters,
#skills .skills-list,
#contact form {
    margin-left: -18px; /* negate panel horizontal padding */
    margin-right: -18px;
    padding-left: 18px; /* restore internal breathing room */
    padding-right: 18px;
    width: 100%; /* compensate for negative margins */
    box-sizing: border-box;
}

/* Ensure skill items still stretch full width inside adjusted container */
#skills .skill-item { width: auto; }

/* Typography defaults */
h1, h2 { font-family: var(--pixel-font); font-weight: bolder; text-align: center; text-shadow: var(--shadow); color: var(--text-light-ink); margin: 2%; padding: 0; }
h2 { font-size: 1.3rem; color: var(--highlight-color); text-shadow: 0 0 8px rgba(100,255,218,0.35); }
h3, h5, h6 { text-align: left; font-size: 1.2rem; color: var(--accent-color); padding: 0 20px; }
p { text-align: left; line-height: 2; font-size: 1rem; color: var(--text-light-ink); padding: 0 20px 1rem; margin: 0; }
header p { text-align: center; font-size: 1.2rem; color: var(--text-light-ink); padding: 0; margin: 0; line-height: 1.2; }

/* Links */
a { color: var(--highlight-color); font-weight: bold; text-decoration: none; }
a:hover, a:focus { color: #9af7e6; text-decoration: none; }

form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 20px;
    margin: 10px 0px;
}

form label {
    font-weight: bold;
    font-size: 1.0rem;
    color: #ffffff; /* readable on dark panels */
}

form input,
form textarea {
    padding: 10px;
    border: var(--border-2);
    border-radius: 5px;
    background-color: #2b2f36; /* was #ffffff; now subdued gray */
    color: #e5e7eb; /* light text for dark field */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
    transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
form input::placeholder,
form textarea::placeholder { color: #9aa0ab; }
form input:focus,
form textarea:focus { outline: none; border-color: var(--highlight-color); box-shadow: 0 0 0 3px rgba(100,255,218,0.25), inset 0 1px 2px rgba(0,0,0,0.7); }

form button {
    padding: 10px 30px;
    margin: 10px auto;
    background-color: var(--color-main-background);
    font-size: 1.2rem;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
    border-radius: 5px;
}

form button:hover {
    background-color: var(--accent-color);
}

/* Sticky recruiter CTA bar */
.cta-bar {
    position: static;        /* no fixed overlay */
    transform: none;
    left: auto; right: auto; bottom: auto;
    margin: 6px auto;
    width: 90%; max-width: 820px;
    display: flex;
    gap: 6px 0px;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    padding: 5px 6px;
    background: rgba(17, 19, 24, 0.6); /* slightly more transparent */
    border: var(--border-3);
    border-radius: var(--radius-14);
    backdrop-filter: blur(3px);
    box-shadow: var(--shadow-elev-18);
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 1 1 0;
    min-height: 44px;
    white-space: nowrap;

    /* font-family via group? No, keep separate for buttons */
    font-family: var(--pixel-font);
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;

    background: var(--accent-color);
    color: #fff;
    border: var(--border-3);
    border-radius: var(--radius-10);
    padding: 8px 10px;
    text-decoration: none;
    box-shadow: 0 4px 0 #5f0b12;
    transition: transform 0.05s ease, box-shadow 0.05s ease;
    appearance: none;
    -webkit-appearance: none;
    position:relative;
    overflow:hidden;
}

.cta-btn:hover, .cta-btn:focus {
    transform: translateY(1px);
    box-shadow: 0 3px 0 #5f0b12, 0 6px 14px rgba(0,0,0,0.55);
}
.cta-btn:active {
    transform: translateY(2px) scale(.97);
    box-shadow: 0 2px 0 #5f0b12, 0 4px 10px rgba(0,0,0,0.6);
}

/* Sheen effect */
.cta-btn::after {
    content:'';
    position:absolute;
    top:0;
    left:-55%;
    width:45%;
    height:100%;
    background: linear-gradient(75deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
    transform:skewX(-18deg);
    opacity:0;
    pointer-events:none;
}
.cta-btn:hover::after, .cta-btn:focus::after {
    animation: ctaSheen 1s cubic-bezier(.22,1,.36,1);
    opacity:1;
}
@keyframes ctaSheen {
    0% { left:-55%; opacity:0; }
    10% { opacity:1; }
    55% { left:115%; opacity:0.4; }
    100% { left:135%; opacity:0; }
}

/* Skills section (compact sizing) */
.skills-filters {
    padding: 6px 16px 4px 16px;
}

.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border: var(--border-3);
    border-radius: var(--radius-10);
    background: var(--surface-dark);
    color: var(--text-light-ink);
    /* font-family via group */
    font-size: 0.8rem;
    /* text-transform via group */
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: var(--shadow-press), 0 6px 12px rgba(0,0,0,0.4);
    transition: transform 0.05s ease, box-shadow 0.05s ease, background 0.2s ease, color 0.2s ease;
}

.chip:hover, .chip:focus { transform: translateY(1px); box-shadow: 0 2px 0 #000, 0 4px 8px rgba(0,0,0,0.4); }
.chip.active, .chip[aria-pressed="true"] {
    background: var(--highlight-color);
    color: #0b0c10;
}

/* Skills list (minimal, post-cleanup) */
.skills-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.skill-item {
    background: #1d2026;
    color: var(--text-light-ink);
    border: var(--border-3);
    border-radius: var(--radius-12);
    padding: 8px 10px;
    box-shadow: var(--shadow-elev-16);
}

.skill-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: 10px 20px; }

/* Base icon look reused by list */
.skill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: var(--border-3);
    border-radius: var(--radius-6);
    box-shadow: var(--shadow-press);
    /* font-family via group */
    font-size: 0.55rem;
    line-height: 1;
    /* text-transform via group */
    letter-spacing: 0.5px;
    color: #fff;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 4px), var(--surface-dark);
}
/* Smaller variant inside list rows */
.skill-item .skill-icon { width: 18px; height: 18px; font-size: 0.5rem; }

.skill-item .skill-name { font-weight: 800; }
.skill-item .skill-meta { font-size: 0.8rem; color: #9af7e6; }

/* Progress bars */
.skill-bar { height: 20px; background: #2b2f36; border: var(--border-2); border-radius: var(--radius-6); overflow: hidden; max-width: 100%; margin-left: auto; margin-right: auto; }
.skill-item .skill-bar { height: 18px; }
.skill-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-color), #ff9a9e, var(--highlight-color)); box-shadow: inset 0 0 6px rgba(0,0,0,0.6); transition: width var(--skill-bar-duration) var(--skill-bar-ease); /* updated easing */ }

/* Interests carousel */
.carousel { position: relative; width: 100%; height: 100%; margin: 6px 0 0; }
.carousel-viewport { overflow:hidden; perspective:800px; }
.carousel-track { 
    display: flex; 
    will-change: transform; 
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
    list-style: none; /* reset default list bullets */
    margin: 0;        /* remove default top/bottom margin */
    padding: 0;       /* remove default left padding indent */
}
.carousel-slide {
    flex: 0 0 100%;   /* ensure exactly one slide fits viewport width */
    width: 100%;      /* explicit width for safety */
    padding: 8px 0px; box-sizing: border-box;
    overflow:hidden;
}

/* Interest card styling */
.interest-card {
    display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px;
    background: #1d2026; color: var(--text-light-ink);
    border: var(--border-3); border-radius: var(--radius-12);
    box-shadow: var(--shadow-elev-16); padding: 12px;
    min-height: 150px; /* give cards a bit more height on desktop */
    width:100%; /* ensure card spans full slide to avoid gaps */
    max-width: 640px;
    margin: 0 auto;
    padding: 10px;
}
.interest-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: var(--border-3); border-radius: var(--radius-8);
    box-shadow: var(--shadow-press); background: var(--surface-dark); font-size: 1.2rem;
}
.interest-icon img { width: 28px; height: 28px; display: block; }
.interest-title { margin: 0 0 4px; padding: 0; font-family: var(--pixel-font); color: var(--highlight-color); font-size: 1.15rem; text-shadow: 0 0 6px rgba(100,255,218,0.25); }
.interest-text { margin: 0; padding: 0; color: #ffffff; line-height: 1.6; font-size: 1.05rem; }

/* Controls */
.carousel-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 38px; height: 80px; display: inline-flex; align-items: center; justify-content: center;
    border: var(--border-3); border-radius: var(--radius-10); background: var(--surface-dark); color: var(--text-light-ink);
    box-shadow: var(--shadow-press); cursor: pointer; user-select: none;
    z-index: 3; /* keep controls above slide content */
}
.carousel-btn:hover, .carousel-btn:focus { transform: translateY(-50%) translateY(1px); }
.carousel-btn.prev { left: 6px; }
.carousel-btn.next { right: 6px; }

/* Dots */
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.dot {
    width: 10px; height: 10px; border: var(--border-3); border-radius: var(--radius-6);
    background: #2b2f36; cursor: pointer; padding: 0; display: inline-block;
}
.dot.is-active { background: var(--highlight-color); box-shadow: 0 0 8px rgba(100,255,218,0.5); }

@media (max-width: 700px) {
    /* Nav: horizontal scroll, icon-only tabs */
    nav { font-size: 1rem; display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; gap: 8px; padding: 8px 10px; }
    nav::-webkit-scrollbar { display: none; }

    .tab-link { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: 0; margin: 0; font-size: 0; white-space: nowrap; border-radius: 12px; }
    .tab-link::before { font-size: 1.3rem; line-height: 1; display: inline-block; }

    /* Mobile icons */
    #projects-tab::before { content: '🗂️'; }
    #skills-tab::before { content: '🛠️'; }
    #interests-tab::before { content: '🎮'; }
    #about-tab::before { content: '👤'; }
    #contact-tab::before { content: '✉️'; }
    #secret-tab::before { content: '🎁'; }

    /* Lists and content tweaks */
    .itemList { list-style-type: none; text-align: center; gap: 20px; }
    #github-projects.projectList a { display: block; padding: 0; margin: 10px 0; justify-self: center; }
    h3 { font-size: 1.3rem; text-align: center; }
    p { text-align: justify; }

    /* Skills layout on narrow widths */
    .skills-list { margin: 0 12px 12px 12px; gap: 6px; }
    .skill-row { grid-template-columns: auto 1fr; }
    .skill-row .skill-meta { grid-column: 1 / -1; justify-self: end; margin-top: 2px; font-size: 0.75rem; opacity: 0.9; }

    /* CTA stack */
    .cta-bar { gap: 8px; padding: 8px 10px; }
    .cta-btn { flex: 1 1 100%; }

    /* Panel spacing */
    .tab-content { padding: 10px 12px 12px; }
    .tab-content p, .interest-text { line-height: 1.6; padding-bottom: 0.75rem; }
    .tab-content h3 { font-size: 1.15rem; margin-bottom: 2px; }
    .itemList li { margin: 0.1rem 0; }

    /* Carousel: viewport narrower than container, no slide side padding */
    .carousel-viewport { width: calc(100% - (var(--carousel-gutter-sm) * 2)); margin: 0 auto; }
    .carousel-slide { padding: 8px 0px; }
}

@media (max-width:700px){
    /* Compact horizontal CTA buttons with icons */
    .cta-bar { gap:4px; padding:6px 8px; flex-wrap:nowrap; justify-content:space-between; }
    .cta-btn { flex:0 0 auto; font-size:0.65rem; padding:6px 6px 6px 6px; min-height:38px; display:inline-flex; flex-direction:column; align-items:center; gap:2px; width:30%; }
    .cta-btn::before { content: attr(data-icon); font-size:1.1rem; line-height:1; display:block; }
}

/***** About: Retro terminal *****/
.terminal {
    background: #0b0c10;
    border: var(--border-3);
    border-radius: var(--radius-12);
    box-shadow: var(--shadow-elev-16);
    color: #d1f7ff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    margin: 12px 16px 4px;
    overflow: hidden;
}
.terminal-header {
    display: flex; align-items: center; gap: 8px;
    background: linear-gradient(180deg, #1a1c22, #121318);
    border-bottom: var(--border-2);
    padding: 6px 8px;
}
.term-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #000; box-shadow: var(--shadow-press); display: inline-block; }
.term-red { background: #ff5f56; }
.term-yellow { background: #ffbd2e; }
.term-green { background: #27c93f; }
.terminal-title { margin-left: auto; color: #8ca1b3; font-size: 0.75rem; letter-spacing: 0.3px; }

.terminal-body { padding: 10px 12px; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 4px); }
.term-line { line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prompt { color: var(--highlight-color); margin-right: 6px; }
.command { color: #ffffff; }
.output { color: #9af7e6; }
.caret { display: inline-block; width: 8px; height: 1rem; background: #9af7e6; margin-left: 2px; animation: blink 1s steps(1) infinite; vertical-align: baseline; }
@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 700px) {
    .terminal { margin: 10px 12px 2px; }
    .terminal-body { padding: 8px 10px; }
    .terminal-title { display: none; }
    .term-line { white-space: normal; }
}

/* Projects list: remove bullets and prevent overflow outside panel border */
#github-projects { list-style: none; padding-left: 0; margin: 0; }
/* If you prefer keeping bullets but inside the border, swap to: */
/* #github-projects { list-style: disc inside; padding-left: 0; margin: 0; } */

/* Secret page list: remove bullets and prevent overflow */
#secret .itemList { list-style: none; padding-left: 0; margin: 0; }

/* Skip link for keyboard users */
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { left: 12px; top: 12px; width: auto; height: auto; padding: 8px 10px; background:#111318; color:#fff; border: var(--border-3); border-radius: var(--radius-10); z-index: 1000; }

/* Improve focus visibility */
:focus-visible { outline: 3px solid var(--highlight-color); outline-offset: 2px; }
.tab-link:focus-visible, .chip:focus-visible, .cta-btn:focus-visible, .carousel-btn:focus-visible, .dot:focus-visible, button:focus-visible, a:focus-visible { box-shadow: 0 0 0 3px rgba(100,255,218,0.45), 0 0 0 6px rgba(0,0,0,0.6); }

/* Dots as tabs: give a bit bigger hit area */
.dot { width: 14px; height: 14px; }

/* Social links container and link styles */
.social-links { display:flex; gap:14px; justify-content:center; align-items:center; margin:8px auto 14px; position:relative; }
.social-link { position:relative; display:inline-flex; text-decoration:none; --sl-bg: rgba(40,44,52,0.55); --sl-border1: rgba(255,255,255,0.15); --sl-border2: rgba(100,255,218,0.35); --sl-glow: rgba(100,255,218,0.55); }
.social-link .sl-inner { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; font-family: var(--pixel-font); font-size:0.75rem; letter-spacing:0.7px; font-weight:700; color: var(--text-light-ink); background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0)); backdrop-filter: blur(6px) saturate(140%); border-radius: 999px; position:relative; overflow:hidden; border:2px solid transparent; }
.social-link .sl-inner::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px; background: linear-gradient(120deg, var(--sl-border1), var(--sl-border2), var(--accent-color)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:0.85; transition:opacity 0.4s ease, filter 0.4s ease; }
.social-link .sl-inner::after { content:''; position:absolute; top:0; left:-60%; width:50%; height:100%; background: linear-gradient(75deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%); transform:skewX(-18deg); opacity:0; pointer-events:none; }
.social-link:hover .sl-inner::after, .social-link:focus .sl-inner::after { animation: slSweep 1.15s cubic-bezier(.22,1,.36,1); opacity:1; }
@keyframes slSweep { 0% { left:-60%; opacity:0; } 15% { opacity:1; } 50% { left:110%; opacity:0.9; } 100% { left:130%; opacity:0; } }
.social-link .sl-ico { width:18px; height:18px; display:block; filter: drop-shadow(0 0 4px rgba(0,0,0,0.4)); }
.social-link.linkedin .sl-ico { color:#0a66c2; }
.social-link.github .sl-ico { color:#ffffff; }
.social-link:hover .sl-inner, .social-link:focus .sl-inner { color:#fff; }
.social-link:hover .sl-inner::before, .social-link:focus .sl-inner::before { filter: drop-shadow(0 0 6px var(--sl-glow)) drop-shadow(0 0 10px var(--sl-glow)); }
.social-link:active .sl-inner { transform: translateY(1px) scale(.97); }
@media (prefers-reduced-motion: reduce) { .social-link .sl-inner::after { display:none; } }
@media (max-width:700px){ .social-links { flex-wrap:wrap; gap:10px; } .social-link .sl-inner { padding:8px 12px; font-size:0.7rem; } .social-link .sl-ico { width:16px; height:16px; } }
/* Skill bar sheen effect */
.skill-bar { position:relative; }
.skill-fill { position:relative; overflow:hidden; }
.skill-fill::after { content:''; position:absolute; top:0; left:-40%; width:40%; height:100%; background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 45%, rgba(255,255,255,0) 90%); transform: skewX(-22deg); opacity:0; pointer-events:none; }
.skill-fill.sheen-active::after { animation: skillSheen 1.2s 0.15s cubic-bezier(.22,1,.36,1); }
@keyframes skillSheen { 0% { left:-40%; opacity:0; } 10% { opacity:0.85; } 55% { left:110%; opacity:0.4; } 100% { left:130%; opacity:0; } }
/* Carousel parallax/tilt */
.carousel-slide { perspective:800px; }
.carousel-slide .interest-card { transition: transform 0.5s cubic-bezier(.22,1,.36,1), box-shadow 0.5s ease; transform-style: preserve-3d; }
.carousel-slide.is-active .interest-card.parallax-active { box-shadow: 0 8px 18px rgba(0,0,0,0.55), 0 0 0 3px #000; }
@media (prefers-reduced-motion: reduce){ .carousel-slide .interest-card { transition:none; } }

/* Projects list styling */

div#project-sort-controls.project-sort {padding: 0px; margin: 8px 0 0;}

#projects .projectList { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:10px; }
#projects .project-card { background:#1d2026; border:var(--border-3); border-radius: var(--radius-12); padding:14px 16px 16px; margin: 0; box-shadow: var(--shadow-elev-16); position:relative; overflow:hidden; transition: transform 0.25s cubic-bezier(.22,1,.36,1), box-shadow 0.25s ease, background 0.35s ease; }
#projects .project-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 15%, rgba(100,255,218,0.15), transparent 60%); opacity:0; transition:opacity 0.4s ease; pointer-events:none; }
#projects .project-card:hover::before { opacity:1; }
#projects .project-card:hover { transform: translateY(-4px); box-shadow: 0 8px 0 #000, 0 14px 22px rgba(0,0,0,0.55); }
#projects .project-card:focus-within { outline: 3px solid var(--highlight-color); outline-offset: 2px; }
#projects .project-card-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0; }
#projects .project-title { font-weight:700; letter-spacing:0.5px; font-size:0.95rem; color: var(--highlight-color); position:relative; }
#projects .project-title:hover { color:#9af7e6; text-decoration:none; }
#projects .project-meta { font-size:0.7rem; color:#9af7e6; white-space:nowrap; }
#projects .project-card-desc { margin:10px 0 0; padding:0; line-height:1.55; font-size:0.9rem; color:#ffffff; }
@media (max-width:700px){ /* adjust project desc size on mobile */ #projects .project-card-desc { font-size:0.86rem; } }
#projects .project-badges { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0; }
#projects .badge { display:inline-flex; align-items:center; gap:4px; font-size:0.6rem; font-weight:600; letter-spacing:0.5px; padding:4px 8px 3px; border: var(--border-2); border-radius: 999px; background:#0f1013; color:#9af7e6; box-shadow: 0 2px 0 #000, 0 4px 10px rgba(0,0,0,0.35); position:relative; }
#projects .badge-stars { background:linear-gradient(135deg, #2a2d34, #202226); }
#projects .badge-stars::before { content:'★'; color: var(--accent-color); margin-right:3px; font-size:0.7rem; filter: drop-shadow(0 0 4px rgba(230,57,70,0.6)); }
#projects .badge-lang { background:linear-gradient(135deg, #1e2025, #181a1f); color:#ffffff; }
#projects .badge-updated { background:#141619; color:#c7d2dc; }
#projects .badge-updated::before { content:'↺'; margin-right:4px; font-size:0.65rem; opacity:0.8; }
@media (max-width:700px){ #projects .projectList { gap:12px; } #projects .project-card { padding:12px 14px 14px; } #projects .project-title { font-size:0.9rem; } #projects .project-card_desc { font-size:0.8rem; } }
/* Panel section titles */
.panel-title {
  position:relative;
  font-family: var(--pixel-font);
  font-size:1.25rem;
  line-height: 3rem;
  letter-spacing:0.5px;
  margin:4px 0 18px;
  padding: 8px 0px 14px;
  background: linear-gradient(90deg, var(--highlight-color) 0%, var(--accent-color) 70%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 0 10px rgba(100,255,218,0.35), 0 0 14px rgba(230,57,70,0.25);
}
.panel-title::after {
  content:"";
  position:absolute;
  left: 5px; bottom: 0px; right: 5px; top: auto;
  height:1px; width:auto;
  background: linear-gradient(90deg, rgba(100,255,218,0.85), rgba(230,57,70,0.85));
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 0 12px rgba(100,255,218,0.5);
}
.panel-title[data-icon] { padding-left:60px; margin: 0px 0px; }
.panel-title[data-icon]::before {
  content: attr(data-icon);
  position:absolute;
  left:0; top:45%; transform:translateY(-50%);
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
  background: linear-gradient(145deg, var(--surface-dark), #1a1c22);
  border: var(--border-3);
  border-radius: var(--radius-12);
  box-shadow: 0 4px 0 #000, 0 6px 12px rgba(0,0,0,0.5);
  text-shadow:none;
  color: var(--text-light-ink);
}
@media (max-width:700px){
  .panel-title { font-size:1.15rem; margin:2px 0 14px; padding:6px 0 12px; }
  .panel-title[data-icon] { padding-left:48px; }
  .panel-title[data-icon]::before { width:38px; height:38px; font-size:1.05rem; }
}

/* ===== Contact Page Enhancements ===== */
#contact { position:relative; }
#contact .contact-intro { margin:4px 0 16px; font-size:0.95rem; line-height:1.6; color:#c7d2dc; }
.contact-layout { display:grid; grid-template-columns: minmax(0,1fr) 340px; gap:28px; align-items:start; }
@media (max-width:980px){ .contact-layout { grid-template-columns:1fr; } }
.contact-form-card { position:relative; background:#1d2026; border:var(--border-3); border-radius: var(--radius-12); box-shadow: var(--shadow-elev-16); overflow:hidden; }
.contact-form-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 15%, rgba(100,255,218,0.08), transparent 60%); opacity:0.9; pointer-events:none; }
.contact-form-card::after { content:""; position:absolute; top:-40%; left:-30%; width:120%; height:180%; background: conic-gradient(from 0deg, rgba(100,255,218,0.15), rgba(230,57,70,0.12), rgba(100,255,218,0.15)); filter: blur(60px) saturate(180%); opacity:0; transition: opacity 0.8s ease; pointer-events:none; }
.contact-form-card:hover::after, .contact-form-card:focus-within::after { opacity:0.9; }
#contact form { margin:0; }
#contact .form-inner { padding:18px 10px 22px; display:flex; flex-direction:column; gap:20px; }
#contact .field { display:flex; flex-direction:column; gap:6px; position:relative; }
#contact label { font-size:0.7rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color: var(--highlight-color); }
#contact input, #contact textarea { background:#121318; border:var(--border-2); border-radius: var(--radius-10); padding:10px 12px; font-size:0.9rem; font-family:inherit; color:#fff; resize:vertical; box-shadow: 0 2px 0 #000, 0 4px 10px rgba(0,0,0,0.35) inset; transition: border-color 0.3s, background 0.3s, box-shadow 0.3s; }
#contact input:focus, #contact textarea:focus { outline:none; border-color: var(--accent-color); background:#0f1013; box-shadow: 0 0 0 2px rgba(230,57,70,0.4), 0 0 0 5px rgba(0,0,0,0.7); }
#contact input::placeholder, #contact textarea::placeholder { color:#6c7a86; }
#contact .field-error { animation: fieldError 0.35s ease; }
@keyframes fieldError { 0% { transform:translateX(0); } 25% { transform:translateX(-6px); } 50% { transform:translateX(5px); } 75% { transform:translateX(-3px); } 100% { transform:translateX(0); } }
#contact .char-progress { position:absolute; bottom:4px; left:10px; right:10px; height:4px; background:#1e2228; border-radius:3px; overflow:hidden; }
#contact .char-progress-bar { width:0%; height:100%; background: linear-gradient(90deg, var(--accent-color), var(--highlight-color)); box-shadow: 0 0 6px rgba(230,57,70,0.6); transition: width 0.3s ease; }
#contact #char-count { margin:4px 0 0; font-size:0.6rem; letter-spacing:1px; opacity:0.8; }
#contact .send-btn { position:relative; display:inline-flex; align-items:center; gap:10px; padding:20px 20px; background: linear-gradient(135deg, var(--accent-color), var(--highlight-color)); color:#0b0c10; font-weight:700; font-size:0.8rem; letter-spacing:1px; text-transform:uppercase; border:var(--border-3); border-radius: var(--radius-12); cursor:pointer; box-shadow: 0 4px 0 #5f0b12, 0 8px 18px rgba(0,0,0,0.55); overflow:hidden; }
#contact .send-btn .plane { display:inline-block; transform:translateY(-1px); transition: transform 0.6s cubic-bezier(.22,1,.36,1); }
#contact .send-btn:hover .plane, #contact .send-btn:focus .plane { transform:translate(6px,-4px) rotate(12deg); }
#contact .send-btn:disabled { opacity:0.55; cursor:wait; }
#contact form.is-sending .send-btn .plane { animation: planePulse 0.9s ease-in-out infinite; }
@keyframes planePulse { 0%,100% { transform:translateY(2px); } 50% { transform:translateY(-3px); } }
#contact .form-status { margin:4px 0 0; font-size:0.7rem; color: var(--accent-color); min-height:1rem; }
#contact .form-success { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px 24px 14px; text-align:center; animation: fadeInScale 0.55s cubic-bezier(.22,1,.36,1); }
#contact .form-success[hidden] { display:none !important; }
@keyframes fadeInScale { 0% { opacity:0; transform:scale(.9); } 100% { opacity:1; transform:scale(1); } }
#contact .success-icon { width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg, var(--highlight-color), var(--accent-color)); display:flex; align-items:center; justify-content:center; font-size:2.2rem; box-shadow: 0 6px 0 #000, 0 10px 24px rgba(0,0,0,0.55); color:#0b0c10; margin-bottom:10px; position:relative; overflow:hidden; }
#contact .success-title { margin:0 0 8px; font-size:1.1rem; background: linear-gradient(90deg, var(--highlight-color), var(--accent-color)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 10px rgba(100,255,218,0.35); }
#contact .success-text { margin:0 0 12px; font-size:0.9rem; color:#ffffff; line-height:1.6; }
#contact .reset-form { padding:10px 18px; background:#14181d; color:var(--text-light-ink); border:var(--border-3); border-radius: var(--radius-10); font-size:0.75rem; letter-spacing:1px; text-transform:uppercase; cursor:pointer; font-weight:600; box-shadow: var(--shadow-press); }
#contact .reset-form:hover, #contact .reset-form:focus { background:#101417; }
.contact-side { position:relative; background:#171a20; border:var(--border-3); border-radius: var(--radius-12); padding:18px 20px 22px; box-shadow: var(--shadow-elev-16); display:flex; flex-direction:column; gap:14px; }
.contact-side::before { content:""; position:absolute; inset:0; background:linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0)); pointer-events:none; border-radius:inherit; }
.contact-blurb { text-align: center; font-size:0.75rem; letter-spacing:1px; text-transform:uppercase; font-weight:700; color: var(--highlight-color); }
.contact-quick { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.contact-quick li { display:flex; }
.quick-copy, .quick-link { flex:1; display:inline-flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; font-size:0.85rem; font-weight:600; letter-spacing:0.5px; color:#fff; background:#1f2329; border:var(--border-2); border-radius: var(--radius-10); cursor:pointer; position:relative; overflow:hidden; text-decoration:none; box-shadow: 0 3px 0 #000, 0 6px 14px rgba(0,0,0,0.45); }
.quick-copy::after, .quick-link::after { content:""; position:absolute; top:0; left:-55%; width:45%; height:100%; background: linear-gradient(75deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%); transform:skewX(-18deg); opacity:0; pointer-events:none; }
.quick-copy:hover::after, .quick-copy:focus::after, .quick-link:hover::after, .quick-link:focus::after { animation: ctaSheen 1s cubic-bezier(.22,1,.36,1); opacity:1; }
.quick-copy.copied { background: linear-gradient(135deg, var(--accent-color), var(--highlight-color)); color:#0b0c10; }
.contact-note { font-size:0.7rem; letter-spacing:0.5px; color:#9af7e6; margin:4px 0 0; }
@media (max-width:700px){
    .contact-layout { gap:18px; }
    .contact-side { order:-1; padding:16px 16px 18px; }
    #contact .form-inner { padding:16px 16px 20px; gap:16px; }
    #contact .send-btn { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
    #contact .contact-form-card::after { display:none; }
    #contact .field-error { animation:none; }
    #contact .send-btn .plane, #contact form.is-sending .send-btn .plane { animation:none; transform:none !important; }
}