@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
    background-color: #f7f7f7;
    color: #333;
    font-family: 'Press Start 2P', cursive;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

header {
    width: 100%;
    border-bottom: 4px solid #ccc;
    box-sizing: border-box;
}

#top-nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.nav-left .brand {
    font-size: 1.1em;
}

.tagline {
    font-size: 0.6em;
    margin-top: 4px;
}

.nav-center {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.nav-link {
    color: #333;
    text-decoration: none;
}

.nav-right {
    display: flex;
    gap: 10px;
}

/* External link styling is now handled by box-button */

/* External CTA section */
#external-cta {
    border: 4px solid #ccc;
    padding: 16px;
    background-color: #fff;
    box-shadow: 4px 4px 0px #ccc;
    text-align: center;
}

.cta-buttons {
    margin: 16px 0;
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-note {
    font-size: 0.6em;
    color: #555;
}
main {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 20px;
    box-sizing: border-box;
}

section {
    width: 100%;
}

h2 {
    font-size: 1em;
    margin-bottom: 10px;
}

.section-subtitle {
    font-size: 0.6em;
    margin-bottom: 16px;
}

#game-container {
    display: flex;
    width: 100%;
    gap: 20px;
}

#character-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 40%;
}

#avatar-container {
    position: relative;
}

#avatar {
    width: 300px;
    height: 300px;
}

#ai-bubble-container {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

.ai-message {
    background-color: #d9edf7;
    border: 4px solid #ccc;
    padding: 20px;
    border-radius: 10px;
    position: relative;
    box-shadow: 4px 4px 0px #ccc;
    min-height: 50px;
    max-height: 200px;
    overflow-y: auto;
}

.ai-message::after {
    content: '';
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 20px 20px 0 20px;
    border-style: solid;
    border-color: #d9edf7 transparent transparent transparent;
}

#chat-log-container {
    width: 60%;
    display: flex;
    flex-direction: column;
}

#chat-log {
    flex: 1;
    border: 4px solid #ccc;
    padding: 10px;
    margin-bottom: 20px;
    overflow-y: auto;
    background-color: #fff;
}

#prompt-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.prompt-chip {
    background-color: #e6e6e6;
    border: 3px solid #ccc;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 0.7em;
    box-shadow: 3px 3px 0px #ccc;
}

.prompt-chip:hover {
    background-color: #d0d0d0;
}

.message {
    margin-bottom: 15px;
    padding: 10px;
    border: 4px solid #ccc;
    position: relative;
    max-width: 90%;
    box-shadow: 4px 4px 0px #ccc;
}

.user-message {
    align-self: flex-end;
    background-color: #e6e6e6;
    border-radius: 10px 10px 0 10px;
}

#input-container {
    display: flex;
}

#user-input {
    flex: 1;
    background-color: #fff;
    border: 4px solid #ccc;
    color: #333;
    padding: 10px;
    font-family: 'Press Start 2P', cursive;
    font-size: 1em;
}

/* Box Button Style - Applied to all buttons */
.box-button {
    cursor: pointer;
    border: 4px solid black;
    background-color: gray;
    padding-bottom: 10px;
    transition: 0.1s ease-in-out;
    user-select: none;
    display: inline-block;
}

.box-button .button {
    background-color: #dddddd;
    border: 4px solid #fff;
    padding: 3px 8px;
    font-family: 'Press Start 2P', cursive;
    border: none;
    background: transparent;
    width: 100%;
    height: 100%;
    cursor: pointer;
    color: #333;
    margin: 0;
    display: block;
    text-decoration: none;
}

.box-button .button span {
    font-size: 1.2em;
    letter-spacing: 1px;
    display: block;
}

/* Smaller font for nav links */
.nav-center .box-button .button span,
.nav-right .box-button .button span {
    font-size: 0.7em;
}

/* Adjust font size for footer CTA buttons */
.cta-buttons .box-button .button span {
    font-size: 0.8em;
}

.box-button:active {
    padding: 0;
    margin-bottom: 10px;
    transform: translateY(10px);
}

#send-btn {
    font-family: 'Press Start 2P', cursive;
    color: #333;
}

footer {
    padding: 20px;
    border-top: 4px solid #ccc;
    width: 100%;
    text-align: center;
}

.social-link {
    color: #333;
    text-decoration: none;
    margin: 0 10px;
    border: 4px solid #ccc;
    padding: 10px;
}

/* Work / case studies */

.work-row-title {
    font-size: 0.8em;
    margin: 16px 0 8px;
}

.work-row-scroll {
    border: 4px solid #ccc;
    padding: 8px;
    margin-bottom: 8px;
    background-color: #fff;
    box-shadow: 4px 4px 0px #ccc;
    overflow-x: auto;
}

.work-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
}

.work-card {
    flex: 0 0 280px;
    border: 4px solid #ccc;
    padding: 12px;
    box-shadow: 4px 4px 0px #ccc;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.work-thumb {
    width: 48px;
    height: 48px;
    border: 4px solid #333;
    background-color: #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    margin-bottom: 4px;
}

.work-card-buttons {
    display: flex;
    gap: 8px;
    margin-top: auto;
    flex-wrap: wrap;
}

.work-card-buttons .box-button {
    flex: 1;
    min-width: 100px;
}

.work-open-btn {
    font-family: 'Press Start 2P', cursive;
    color: #333;
}

.work-open-btn span {
    font-size: 0.6em;
}

.github-btn {
    font-family: 'Press Start 2P', cursive;
    color: #333;
}

.github-btn span {
    font-size: 0.6em;
}

/* Tech Tags */
.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.tech-tag {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.5em;
    padding: 4px 8px;
    border: 2px solid #333;
    display: inline-block;
    color: #fff;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.3);
}

.tech-tag.python {
    background-color: #3776ab;
    border-color: #2d5a87;
}

.tech-tag.fastapi {
    background-color: #009688;
    border-color: #00796b;
}

.tech-tag.websocket {
    background-color: #ff6b35;
    border-color: #e55a2b;
}

.tech-tag.openai {
    background-color: #10a37f;
    border-color: #0d8a6b;
}

.tech-tag.docker {
    background-color: #2496ed;
    border-color: #1e7fc4;
}

.tech-tag.opencv {
    background-color: #5c3ee8;
    border-color: #4a2fb8;
}

.tech-tag.mediapipe {
    background-color: #4285f4;
    border-color: #3367d6;
}

.tech-tag.numpy {
    background-color: #4dabcf;
    border-color: #3d8ba8;
}

.tech-tag.javascript {
    background-color: #f7df1e;
    border-color: #d4c019;
    color: #333;
    text-shadow: none;
}

.tech-tag.nodejs {
    background-color: #339933;
    border-color: #2a7a2a;
}

.tech-tag.express {
    background-color: #000000;
    border-color: #333;
}

.tech-tag.mongodb {
    background-color: #47a248;
    border-color: #3a823b;
}

.tech-tag.html {
    background-color: #e34c26;
    border-color: #b83a1e;
}

.tech-tag.react {
    background-color: #61dafb;
    border-color: #4fb3d1;
    color: #333;
    text-shadow: none;
}

.tech-tag.firebase {
    background-color: #ffca28;
    border-color: #d4a321;
    color: #333;
    text-shadow: none;
}

/* Sliding work panel */

#work-panel {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
    width: 100%;
    max-width: 960px;
    z-index: 1000;
    transition: transform 0.3s ease-out;
}

#work-panel-inner {
    background-color: #fff;
    border: 4px solid #333;
    box-shadow: 6px -6px 0px #999;
    padding: 16px;
    max-height: 60vh;
    overflow-y: auto;
}

#work-panel.panel-open {
    transform: translate(-50%, 0);
}

#work-panel-close {
    font-family: 'Press Start 2P', cursive;
    color: #333;
    float: right;
}

#work-panel-close span {
    font-size: 1em;
}

#work-panel-title {
    margin-top: 0;
    margin-bottom: 10px;
}

/* Contact */

#contact-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.contact-card {
    flex: 1 1 220px;
    border: 4px solid #ccc;
    padding: 12px;
    box-shadow: 4px 4px 0px #ccc;
    background-color: #fff;
    font-size: 0.7em;
}

.contact-card a {
    color: #333;
}

/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Loading Ghost Animation */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(247, 247, 247, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

.loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

#ghost {
    position: relative;
    scale: 0.8;
}

#red {
    animation: upNDown infinite 0.5s;
    position: relative;
    width: 140px;
    height: 140px;
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: repeat(14, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-areas:
        "a1  a2  a3  a4  a5  top0  top0  top0  top0  a10 a11 a12 a13 a14"
        "b1  b2  b3  top1 top1 top1 top1 top1 top1 top1 top1 b12 b13 b14"
        "c1 c2 top2 top2 top2 top2 top2 top2 top2 top2 top2 top2 c13 c14"
        "d1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 d14"
        "e1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 e14"
        "f1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 f14"
        "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
        "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
        "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
        "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
        "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
        "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
        "st0 st0 an4 st1 an7 st2 an10 an10 st3 an13 st4 an16 st5 st5"
        "an1 an2 an3 an5 an6 an8 an9 an9 an11 an12 an14 an15 an17 an18";
}

@keyframes upNDown {
    0%,
    49% {
        transform: translateY(0px);
    }
    50%,
    100% {
        transform: translateY(-10px);
    }
}

#top0,
#top1,
#top2,
#top3,
#top4,
#st0,
#st1,
#st2,
#st3,
#st4,
#st5 {
    background-color: red;
}

#top0 {
    grid-area: top0;
}

#top1 {
    grid-area: top1;
}

#top2 {
    grid-area: top2;
}

#top3 {
    grid-area: top3;
}

#top4 {
    grid-area: top4;
}

#st0 {
    grid-area: st0;
}

#st1 {
    grid-area: st1;
}

#st2 {
    grid-area: st2;
}

#st3 {
    grid-area: st3;
}

#st4 {
    grid-area: st4;
}

#st5 {
    grid-area: st5;
}

#an1 {
    grid-area: an1;
    animation: flicker0 infinite 0.5s;
}

#an18 {
    grid-area: an18;
    animation: flicker0 infinite 0.5s;
}

#an2 {
    grid-area: an2;
    animation: flicker1 infinite 0.5s;
}

#an17 {
    grid-area: an17;
    animation: flicker1 infinite 0.5s;
}

#an3 {
    grid-area: an3;
    animation: flicker1 infinite 0.5s;
}

#an16 {
    grid-area: an16;
    animation: flicker1 infinite 0.5s;
}

#an4 {
    grid-area: an4;
    animation: flicker1 infinite 0.5s;
}

#an15 {
    grid-area: an15;
    animation: flicker1 infinite 0.5s;
}

#an6 {
    grid-area: an6;
    animation: flicker0 infinite 0.5s;
}

#an12 {
    grid-area: an12;
    animation: flicker0 infinite 0.5s;
}

#an7 {
    grid-area: an7;
    animation: flicker0 infinite 0.5s;
}

#an13 {
    grid-area: an13;
    animation: flicker0 infinite 0.5s;
}

#an9 {
    grid-area: an9;
    animation: flicker1 infinite 0.5s;
}

#an10 {
    grid-area: an10;
    animation: flicker1 infinite 0.5s;
}

#an8 {
    grid-area: an8;
    animation: flicker0 infinite 0.5s;
}

#an11 {
    grid-area: an11;
    animation: flicker0 infinite 0.5s;
}

@keyframes flicker0 {
    0%,
    49% {
        background-color: red;
    }
    50%,
    100% {
        background-color: transparent;
    }
}

@keyframes flicker1 {
    0%,
    49% {
        background-color: transparent;
    }
    50%,
    100% {
        background-color: red;
    }
}

#eye {
    width: 40px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 10px;
}

#eye::before {
    content: "";
    background-color: white;
    width: 20px;
    height: 50px;
    transform: translateX(10px);
    display: block;
    position: absolute;
}

#eye::after {
    content: "";
    background-color: white;
    width: 40px;
    height: 30px;
    transform: translateY(10px);
    display: block;
    position: absolute;
}

#eye1 {
    width: 40px;
    height: 50px;
    position: absolute;
    top: 30px;
    right: 30px;
}

#eye1::before {
    content: "";
    background-color: white;
    width: 20px;
    height: 50px;
    transform: translateX(10px);
    display: block;
    position: absolute;
}

#eye1::after {
    content: "";
    background-color: white;
    width: 40px;
    height: 30px;
    transform: translateY(10px);
    display: block;
    position: absolute;
}

#pupil {
    width: 20px;
    height: 20px;
    background-color: blue;
    position: absolute;
    top: 50px;
    left: 10px;
    z-index: 1;
    animation: eyesMovement infinite 3s;
}

#pupil1 {
    width: 20px;
    height: 20px;
    background-color: blue;
    position: absolute;
    top: 50px;
    right: 50px;
    z-index: 1;
    animation: eyesMovement infinite 3s;
}

@keyframes eyesMovement {
    0%,
    49% {
        transform: translateX(0px);
    }
    50%,
    99% {
        transform: translateX(10px);
    }
    100% {
        transform: translateX(0px);
    }
}

#shadow {
    background-color: black;
    width: 140px;
    height: 140px;
    position: absolute;
    border-radius: 50%;
    transform: rotateX(80deg);
    filter: blur(20px);
    top: 80%;
    animation: shadowMovement infinite 0.5s;
}

@keyframes shadowMovement {
    0%,
    49% {
        opacity: 0.5;
    }
    50%,
    100% {
        opacity: 0.2;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    #game-container {
        flex-direction: column;
    }

    #character-container, #chat-log-container {
        width: 100%;
    }

    #avatar {
        width: 200px;
        height: 200px;
    }

    #top-nav {
        flex-direction: column;
        align-items: flex-start;
    }

    #work-panel-inner {
        max-height: 70vh;
    }

    .work-card {
        flex: 0 0 250px;
    }

    .tech-tags {
        gap: 4px;
    }

    .tech-tag {
        font-size: 0.45em;
        padding: 3px 6px;
    }

    .work-card-buttons {
        flex-direction: column;
    }

    .work-card-buttons .box-button {
        width: 100%;
    }
}