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

:root {
    /* Cottagecore x Solarpunk Palette */
    --brass: #d4a373; /* Softer, warmer brass/wood tone */
    --brass-dark: #a98467;
    --brass-light: #faedcd;
    --glass-bg: rgba(254, 250, 224, 0.85); /* Creamy, warm glass */
    --glass-border: rgba(204, 213, 174, 0.6);
    --energy: #88a550; /* Sage green */
    --energy-glow: rgba(136, 165, 80, 0.6);
    --energy-dark: #606c38; /* Deep olive */
    --text-main: #283618; /* Dark forest green for text */
    --text-muted: #606c38;
    --bg-dark: #fefae0; /* Light cream background */
    --ui-panel: rgba(233, 237, 201, 0.6); /* Light sage panel */
    --accent-pink: #e29578; /* Soft rose/peach accent */
}

body.night-mode {
    /* Dark Forest Solarpunk Palette */
    --brass: #b08968;
    --brass-dark: #7f5539;
    --brass-light: #ddb892;
    --glass-bg: rgba(10, 25, 18, 0.85);
    --glass-border: rgba(57, 255, 20, 0.3);
    --energy: #39ff14;
    --energy-glow: rgba(57, 255, 20, 0.6);
    --energy-dark: #008f11;
    --text-main: #e0f2e9;
    --text-muted: #95d5b2;
    --bg-dark: #050d09;
    --ui-panel: rgba(15, 40, 28, 0.6);
    --accent-pink: #ff007f;
}

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

body {
    font-family: 'Fredoka', sans-serif;
    color: var(--text-main);
    background-color: var(--bg-dark);
    overflow-x: hidden;
    line-height: 1.6;
    cursor: crosshair;
}

/* Immersive Background - Cottagecore Window */
.world-bg {
    position: fixed;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    background-image: 
        linear-gradient(to bottom, rgba(254, 250, 224, 0.3), rgba(254, 250, 224, 0.8)),
        url('/images/solarpunk1.jpg'); /* Cottage window with vines */
        /*https://www.tumblr.com/solarpunk-art*/
        background-size: cover;
    background-position: center;
    z-index: -2;
    filter: contrast(1.1) saturate(1.2) brightness(1.1);
    transition: transform 0.1s ease-out;
}

body.night-mode .world-bg {
    background-image: 
        linear-gradient(to bottom, rgba(5, 13, 9, 0.7), rgba(5, 13, 9, 0.95)),
        url('images/enchantedforest.jpg'); /* Magical glowing forest */
        /*https://stockcake.com/i/enchanted-forest-glow_439328_213124 */
    filter: contrast(1.2) saturate(1.5) brightness(0.8);
}

/* Ambient Dust / Fireflies */
.ambient-dust {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Changed from -1 to 0 so it sits above the background but below content */
    pointer-events: none;
}

.spore {
    position: absolute;
    background: #fff; /* Bright white core */
    border-radius: 50%;
    box-shadow: 0 0 10px #fff, 0 0 20px #ffb703, 0 0 30px #fb8500; /* Neon yellow/orange glow */
    opacity: 0;
    animation: float-up linear infinite;
}

@keyframes float-up {
    0% { transform: translateY(100vh) scale(0) translateX(0); opacity: 0; }
    20% { opacity: 1; transform: translateY(80vh) scale(1) translateX(20px); }
    50% { transform: translateY(50vh) scale(1.5) translateX(-20px); }
    80% { opacity: 0.8; transform: translateY(20vh) scale(1) translateX(15px); }
    100% { transform: translateY(-100px) scale(2) translateX(-10px); opacity: 0; }
}

/* HUD Navigation */
.hud-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    background: linear-gradient(to bottom, rgba(254, 250, 224, 0.95), transparent);
    border-bottom: 4px dashed var(--energy-dark); /* Pixelated border feel */
    backdrop-filter: blur(8px);
}

body.night-mode .hud-nav {
    background: linear-gradient(to bottom, rgba(5, 13, 9, 0.95), transparent);
}

.system-status {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Press Start 2P', monospace; /* Pixel font */
    font-size: 0.7rem;
    color: var(--energy-dark);
    background: var(--ui-panel);
    padding: 8px 15px;
    border-radius: 0; /* Blocky */
    border: 2px solid var(--energy-dark);
    box-shadow: 4px 4px 0 var(--energy-dark); /* Pixel shadow */
}

.status-light {
    width: 12px;
    height: 12px;
    background: var(--accent-pink);
    border: 2px solid var(--text-main);
    animation: blink 2s infinite;
}

.level-badge {
    background: var(--energy);
    color: var(--bg-dark);
    padding: 4px 8px;
    border: 2px solid var(--text-main);
    font-weight: bold;
    margin-left: 10px;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.nav-nodes {
    list-style: none;
    display: flex;
    gap: 15px;
}

.mech-button {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 10px 20px;
    background: var(--glass-bg);
    border: 2px solid var(--energy-dark);
    border-radius: 8px; /* Slightly rounded but still blocky */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
    box-shadow: 3px 3px 0 var(--energy-dark);
}

.btn-icon {
    width: 20px;
    height: 20px;
    background-color: var(--energy-dark);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.bio-icon { -webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M17%2C8C8%2C10%205.9%2C16.17%203.82%2C21.34L5.71%2C22L6.66%2C19.7C7.14%2C19.87%207.64%2C20%208%2C20C19%2C20%2022%2C3%2022%2C3C21%2C5%2014%2C5.25%209%2C6.25C4%2C7.25%207.05%2C10.5%207.05%2C10.5C7.05%2C10.5%2011%2C10.5%2017%2C8Z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M17%2C8C8%2C10%205.9%2C16.17%203.82%2C21.34L5.71%2C22L6.66%2C19.7C7.14%2C19.87%207.64%2C20%208%2C20C19%2C20%2022%2C3%2022%2C3C21%2C5%2014%2C5.25%209%2C6.25C4%2C7.25%207.05%2C10.5%207.05%2C10.5C7.05%2C10.5%2011%2C10.5%2017%2C8Z%22/%3E%3C/svg%3E'); }
.gear-icon { -webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M14%2C10H2V12H14V10M14%2C6H2V8H14V6M2%2C16H10V14H2V16M21.5%2C11.5L23%2C13L16%2C20L11.5%2C15.5L13%2C14L16%2C17L21.5%2C11.5Z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M14%2C10H2V12H14V10M14%2C6H2V8H14V6M2%2C16H10V14H2V16M21.5%2C11.5L23%2C13L16%2C20L11.5%2C15.5L13%2C14L16%2C17L21.5%2C11.5Z%22/%3E%3C/svg%3E'); }
.core-icon { -webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.78%2015.3L19.78%2021.3L21.89%2019.14L15.89%2013.14L13.78%2015.3M17.5%2010.1C17.11%2010.1%2016.69%2010.05%2016.36%209.91L4.97%2021.25L2.86%2019.14L11.4%2010.56L10.46%209.63L12.58%207.5L14.7%209.63L15.64%208.69L14.58%207.63L16.69%205.5L18.81%207.63C19.04%207.25%2019.2%206.82%2019.2%206.38C19.2%204.95%2018.05%203.78%2016.63%203.78C15.19%203.78%2014.04%204.95%2014.04%206.38C14.04%206.77%2014.09%207.19%2014.23%207.5L12.11%209.63L11.17%208.69L13.29%206.57L11.17%204.46L9.06%206.57L8.12%205.63L10.24%203.5L8.12%201.39L2.46%207.05L4.58%209.16L3.5%2010.24L5.63%2012.36L6.57%2011.42L8.69%2013.54L9.63%2012.6L10.56%2013.54L2%2022.15L4.11%2024.26L15.45%2012.86C15.76%2013%2016.19%2013.05%2016.58%2013.05C18.03%2013.05%2019.18%2011.89%2019.18%2010.46C19.18%209.04%2018.03%207.88%2016.61%207.88C16.22%207.88%2015.8%207.93%2015.46%208.07L17.58%2010.19L17.5%2010.1Z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.78%2015.3L19.78%2021.3L21.89%2019.14L15.89%2013.14L13.78%2015.3M17.5%2010.1C17.11%2010.1%2016.69%2010.05%2016.36%209.91L4.97%2021.25L2.86%2019.14L11.4%2010.56L10.46%209.63L12.58%207.5L14.7%209.63L15.64%208.69L14.58%207.63L16.69%205.5L18.81%207.63C19.04%207.25%2019.2%206.82%2019.2%206.38C19.2%204.95%2018.05%203.78%2016.63%203.78C15.19%203.78%2014.04%204.95%2014.04%206.38C14.04%206.77%2014.09%207.19%2014.23%207.5L12.11%209.63L11.17%208.69L13.29%206.57L11.17%204.46L9.06%206.57L8.12%205.63L10.24%203.5L8.12%201.39L2.46%207.05L4.58%209.16L3.5%2010.24L5.63%2012.36L6.57%2011.42L8.69%2013.54L9.63%2012.6L10.56%2013.54L2%2022.15L4.11%2024.26L15.45%2012.86C15.76%2013%2016.19%2013.05%2016.58%2013.05C18.03%2013.05%2019.18%2011.89%2019.18%2010.46C19.18%209.04%2018.03%207.88%2016.61%207.88C16.22%207.88%2015.8%207.93%2015.46%208.07L17.58%2010.19L17.5%2010.1Z%22/%3E%3C/svg%3E'); }
.moon-icon { -webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M17.75%2C4.09L15.22%2C6.03L16.13%2C9.09L13.5%2C7.28L10.87%2C9.09L11.78%2C6.03L9.25%2C4.09L12.44%2C4L13.5%2C1L14.56%2C4L17.75%2C4.09M21.25%2C11L19.61%2C12.25L20.2%2C14.23L18.5%2C13.06L16.8%2C14.23L17.39%2C12.25L15.75%2C11L17.81%2C10.95L18.5%2C9L19.19%2C10.95L21.25%2C11M18.97%2C15.95C19.8%2C15.87%2020.69%2C17.05%2020.16%2C17.8C19.84%2C18.25%2019.5%2C18.67%2019.08%2C19.07C15.17%2C23%208.84%2C23%204.94%2C19.07C1.03%2C15.17%201.03%2C8.83%204.94%2C4.93C5.34%2C4.53%205.76%2C4.17%206.21%2C3.85C6.96%2C3.32%208.14%2C4.21%208.06%2C5.04C7.79%2C7.9%208.75%2C10.87%2010.95%2C13.06C13.14%2C15.26%2016.1%2C16.22%2018.97%2C15.95Z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M17.75%2C4.09L15.22%2C6.03L16.13%2C9.09L13.5%2C7.28L10.87%2C9.09L11.78%2C6.03L9.25%2C4.09L12.44%2C4L13.5%2C1L14.56%2C4L17.75%2C4.09M21.25%2C11L19.61%2C12.25L20.2%2C14.23L18.5%2C13.06L16.8%2C14.23L17.39%2C12.25L15.75%2C11L17.81%2C10.95L18.5%2C9L19.19%2C10.95L21.25%2C11M18.97%2C15.95C19.8%2C15.87%2020.69%2C17.05%2020.16%2C17.8C19.84%2C18.25%2019.5%2C18.67%2019.08%2C19.07C15.17%2C23%208.84%2C23%204.94%2C19.07C1.03%2C15.17%201.03%2C8.83%204.94%2C4.93C5.34%2C4.53%205.76%2C4.17%206.21%2C3.85C6.96%2C3.32%208.14%2C4.21%208.06%2C5.04C7.79%2C7.9%208.75%2C10.87%2010.95%2C13.06C13.14%2C15.26%2016.1%2C16.22%2018.97%2C15.95Z%22/%3E%3C/svg%3E'); }
.sun-icon { -webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2C7A5%2C5%200%200%2C1%2017%2C12A5%2C5%200%200%2C1%2012%2C17A5%2C5%200%200%2C1%207%2C12A5%2C5%200%200%2C1%2012%2C7M12%2C9A3%2C3%200%200%2C0%209%2C12A3%2C3%200%200%2C0%2012%2C15A3%2C3%200%200%2C0%2015%2C12A3%2C3%200%200%2C0%2012%2C9M11%2C1V5.5H13V1H11M11%2C18.5V23H13V18.5H11M5.33%2C3.92L8.5%2C7.1L9.9%2C5.68L6.75%2C2.5L5.33%2C3.92M18.67%2C20.08L15.5%2C16.9L14.1%2C18.32L17.25%2C21.5L18.67%2C20.08M1%2C11V13H5.5V11H1M18.5%2C11V13H23V11H18.5M5.33%2C20.08L6.75%2C21.5L9.9%2C18.32L8.5%2C16.9L5.33%2C20.08M18.67%2C3.92L17.25%2C2.5L14.1%2C5.68L15.5%2C7.1L18.67%2C3.92Z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2C7A5%2C5%200%200%2C1%2017%2C12A5%2C5%200%200%2C1%2012%2C17A5%2C5%200%200%2C1%207%2C12A5%2C5%200%200%2C1%2012%2C7M12%2C9A3%2C3%200%200%2C0%209%2C12A3%2C3%200%200%2C0%2012%2C15A3%2C3%200%200%2C0%2015%2C12A3%2C3%200%200%2C0%2012%2C9M11%2C1V5.5H13V1H11M11%2C18.5V23H13V18.5H11M5.33%2C3.92L8.5%2C7.1L9.9%2C5.68L6.75%2C2.5L5.33%2C3.92M18.67%2C20.08L15.5%2C16.9L14.1%2C18.32L17.25%2C21.5L18.67%2C20.08M1%2C11V13H5.5V11H1M18.5%2C11V13H23V11H18.5M5.33%2C20.08L6.75%2C21.5L9.9%2C18.32L8.5%2C16.9L5.33%2C20.08M18.67%2C3.92L17.25%2C2.5L14.1%2C5.68L15.5%2C7.1L18.67%2C3.92Z%22/%3E%3C/svg%3E'); }

.mech-button:hover {
    background: var(--energy);
    color: var(--bg-dark);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--energy-dark);
}

.mech-button:hover .btn-icon {
    background-color: var(--bg-dark);
}

.mech-button:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--energy-dark);
}

/* Main Container */
.environment-container {
    max-width: 850px;
    margin: 140px auto 60px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* Glass Panels (The core UI element) */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 3px solid var(--energy-dark);
    border-radius: 12px;
    box-shadow: 
        8px 8px 0 rgba(96, 108, 56, 0.2),
        inset 0 0 20px rgba(255, 255, 255, 0.5);
    position: relative;
}

/* Hero Terminal */
.hero-terminal {
    padding: 0;
    overflow: hidden;
}

.terminal-header {
    background: var(--ui-panel);
    padding: 12px 20px;
    border-bottom: 3px solid var(--energy-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.dot {
    width: 14px;
    height: 14px;
    border: 2px solid var(--energy-dark);
    background: var(--glass-bg);
}
.dot:nth-child(1) { background: var(--accent-pink); }
.dot:nth-child(2) { background: var(--brass); }
.dot:nth-child(3) { background: var(--energy); }

.terminal-header .title {
    margin-left: 15px;
    font-family: 'Press Start 2P', monospace;
    color: var(--energy-dark);
    font-size: 0.7rem;
}

.xp-bar-container {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 200px;
}

.xp-text {
    font-family: 'Press Start 2P', monospace;
    color: var(--energy-dark);
    font-size: 0.7rem;
}

.xp-bar {
    flex-grow: 1;
    height: 14px;
    background: var(--glass-bg);
    border: 2px solid var(--energy-dark);
    padding: 2px;
}

.xp-fill {
    height: 100%;
    width: 75%;
    background: var(--energy);
}

.terminal-content {
    padding: 40px;
    display: flex;
    gap: 30px;
    align-items: center;
}

.avatar-container {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.avatar-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px dashed var(--energy);
    border-radius: 50%;
    animation: spin 15s linear infinite;
}

.avatar-core {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--glass-bg);
    border: 2px solid var(--energy-dark);
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.avatar-core:hover {
    transform: scale(1.05);
}

.click-me-hint {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    color: var(--energy-dark);
    background: var(--glass-bg);
    padding: 4px 8px;
    border: 1px dashed var(--energy-dark);
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    animation: bounce 2s infinite;
}

.click-me-hint::before {
    content: '↑';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
}

@keyframes spin { 100% { transform: rotate(360deg); } }

.hero-text {
    flex-grow: 1;
}

.terminal-content h1 {
    font-size: 3.5rem;
    color: var(--text-main);
    margin-bottom: 5px;
    text-shadow: 2px 2px 0 var(--brass-light);
}

.subtitle {
    font-family: 'VT323', monospace;
    font-size: 1.6rem;
    color: var(--energy-dark);
}

.power-line {
    height: 4px;
    background: var(--glass-border);
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}

.power-flow {
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: var(--energy);
    animation: flow 3s infinite;
}

@keyframes flow {
    0% { left: -50%; }
    100% { left: 100%; }
}

.stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}

.stat-box {
    background: var(--glass-bg);
    border: 2px solid var(--energy-dark);
    padding: 8px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
    box-shadow: 3px 3px 0 rgba(96, 108, 56, 0.2);
}

.stat-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.stat-value {
    font-family: 'VT323', monospace;
    font-size: 1.8rem;
    color: var(--energy-dark);
    font-weight: bold;
}

/* Content Modules */
.content-module {
    padding: 40px;
    border-left: 8px solid var(--energy);
}

.module-connector {
    position: absolute;
    left: -35px;
    width: 27px;
    height: 6px;
    background: var(--energy);
    border: 2px solid var(--energy-dark);
    border-right: none;
}

.module-connector.top { top: 50px; }
.module-connector.bottom { bottom: 50px; }

.brass-heading {
    color: var(--text-main);
    font-size: 2.2rem;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 4px dashed var(--glass-border);
    padding-bottom: 15px;
}

.heading-icon {
    width: 35px;
    height: 35px;
    background-color: var(--energy-dark);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.leaf-icon { -webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M17%2C8C8%2C10%205.9%2C16.17%203.82%2C21.34L5.71%2C22L6.66%2C19.7C7.14%2C19.87%207.64%2C20%208%2C20C19%2C20%2022%2C3%2022%2C3C21%2C5%2014%2C5.25%209%2C6.25C4%2C7.25%207.05%2C10.5%207.05%2C10.5C7.05%2C10.5%2011%2C10.5%2017%2C8Z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M17%2C8C8%2C10%205.9%2C16.17%203.82%2C21.34L5.71%2C22L6.66%2C19.7C7.14%2C19.87%207.64%2C20%208%2C20C19%2C20%2022%2C3%2022%2C3C21%2C5%2014%2C5.25%209%2C6.25C4%2C7.25%207.05%2C10.5%207.05%2C10.5C7.05%2C10.5%2011%2C10.5%2017%2C8Z%22/%3E%3C/svg%3E'); }
.quest-icon { -webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M14%2C10H2V12H14V10M14%2C6H2V8H14V6M2%2C16H10V14H2V16M21.5%2C11.5L23%2C13L16%2C20L11.5%2C15.5L13%2C14L16%2C17L21.5%2C11.5Z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M14%2C10H2V12H14V10M14%2C6H2V8H14V6M2%2C16H10V14H2V16M21.5%2C11.5L23%2C13L16%2C20L11.5%2C15.5L13%2C14L16%2C17L21.5%2C11.5Z%22/%3E%3C/svg%3E'); }
.craft-icon { -webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.78%2015.3L19.78%2021.3L21.89%2019.14L15.89%2013.14L13.78%2015.3M17.5%2010.1C17.11%2010.1%2016.69%2010.05%2016.36%209.91L4.97%2021.25L2.86%2019.14L11.4%2010.56L10.46%209.63L12.58%207.5L14.7%209.63L15.64%208.69L14.58%207.63L16.69%205.5L18.81%207.63C19.04%207.25%2019.2%206.82%2019.2%206.38C19.2%204.95%2018.05%203.78%2016.63%203.78C15.19%203.78%2014.04%204.95%2014.04%206.38C14.04%206.77%2014.09%207.19%2014.23%207.5L12.11%209.63L11.17%208.69L13.29%206.57L11.17%204.46L9.06%206.57L8.12%205.63L10.24%203.5L8.12%201.39L2.46%207.05L4.58%209.16L3.5%2010.24L5.63%2012.36L6.57%2011.42L8.69%2013.54L9.63%2012.6L10.56%2013.54L2%2022.15L4.11%2024.26L15.45%2012.86C15.76%2013%2016.19%2013.05%2016.58%2013.05C18.03%2013.05%2019.18%2011.89%2019.18%2010.46C19.18%209.04%2018.03%207.88%2016.61%207.88C16.22%207.88%2015.8%207.93%2015.46%208.07L17.58%2010.19L17.5%2010.1Z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.78%2015.3L19.78%2021.3L21.89%2019.14L15.89%2013.14L13.78%2015.3M17.5%2010.1C17.11%2010.1%2016.69%2010.05%2016.36%209.91L4.97%2021.25L2.86%2019.14L11.4%2010.56L10.46%209.63L12.58%207.5L14.7%209.63L15.64%208.69L14.58%207.63L16.69%205.5L18.81%207.63C19.04%207.25%2019.2%206.82%2019.2%206.38C19.2%204.95%2018.05%203.78%2016.63%203.78C15.19%203.78%2014.04%204.95%2014.04%206.38C14.04%206.77%2014.09%207.19%2014.23%207.5L12.11%209.63L11.17%208.69L13.29%206.57L11.17%204.46L9.06%206.57L8.12%205.63L10.24%203.5L8.12%201.39L2.46%207.05L4.58%209.16L3.5%2010.24L5.63%2012.36L6.57%2011.42L8.69%2013.54L9.63%2012.6L10.56%2013.54L2%2022.15L4.11%2024.26L15.45%2012.86C15.76%2013%2016.19%2013.05%2016.58%2013.05C18.03%2013.05%2019.18%2011.89%2019.18%2010.46C19.18%209.04%2018.03%207.88%2016.61%207.88C16.22%207.88%2015.8%207.93%2015.46%208.07L17.58%2010.19L17.5%2010.1Z%22/%3E%3C/svg%3E'); }

.module-inner p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

/* Inventory Slots */
.inventory-slots {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    padding: 20px;
    background: var(--ui-panel);
    border: 3px solid var(--energy-dark);
    box-shadow: inset 4px 4px 0 rgba(0,0,0,0.05);
}

.inv-slot {
    width: 60px;
    height: 60px;
    background: var(--glass-bg);
    border: 2px solid var(--energy-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    box-shadow: 2px 2px 0 var(--energy-dark);
}

.inv-slot:hover {
    background: var(--brass-light);
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--energy-dark);
}

.item-icon {
    width: 35px;
    height: 35px;
    background-color: var(--energy-dark);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.violin { -webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.5%2C1.5C13.5%2C1.5%2012%2C1.5%2012%2C3C12%2C4.5%2013.5%2C4.5%2013.5%2C6C13.5%2C7.5%2012%2C7.5%2012%2C7.5L10.5%2C9C10.5%2C9%209%2C10.5%209%2C12C9%2C13.5%2010.5%2C15%2010.5%2C15L9%2C16.5C9%2C16.5%207.5%2C18%207.5%2C19.5C7.5%2C21%209%2C22.5%209%2C22.5C9%2C22.5%2010.5%2C22.5%2010.5%2C21C10.5%2C19.5%209%2C19.5%209%2C18C9%2C16.5%2010.5%2C16.5%2010.5%2C16.5L12%2C15C12%2C15%2013.5%2C13.5%2013.5%2C12C13.5%2C10.5%2012%2C9%2012%2C9L13.5%2C7.5C13.5%2C7.5%2015%2C6%2015%2C4.5C15%2C3%2013.5%2C1.5%2013.5%2C1.5M16.5%2C10.5L15%2C12L18%2C15L19.5%2C13.5L16.5%2C10.5M7.5%2C13.5L4.5%2C16.5L6%2C18L9%2C15L7.5%2C13.5Z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.5%2C1.5C13.5%2C1.5%2012%2C1.5%2012%2C3C12%2C4.5%2013.5%2C4.5%2013.5%2C6C13.5%2C7.5%2012%2C7.5%2012%2C7.5L10.5%2C9C10.5%2C9%209%2C10.5%209%2C12C9%2C13.5%2010.5%2C15%2010.5%2C15L9%2C16.5C9%2C16.5%207.5%2C18%207.5%2C19.5C7.5%2C21%209%2C22.5%209%2C22.5C9%2C22.5%2010.5%2C22.5%2010.5%2C21C10.5%2C19.5%209%2C19.5%209%2C18C9%2C16.5%2010.5%2C16.5%2010.5%2C16.5L12%2C15C12%2C15%2013.5%2C13.5%2013.5%2C12C13.5%2C10.5%2012%2C9%2012%2C9L13.5%2C7.5C13.5%2C7.5%2015%2C6%2015%2C4.5C15%2C3%2013.5%2C1.5%2013.5%2C1.5M16.5%2C10.5L15%2C12L18%2C15L19.5%2C13.5L16.5%2C10.5M7.5%2C13.5L4.5%2C16.5L6%2C18L9%2C15L7.5%2C13.5Z%22/%3E%3C/svg%3E'); }
.shoes { -webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M21.58%2C16.09L14.42%2C14.66L14.22%2C14.58L13.95%2C14.76L10.25%2C17.22L10.14%2C17.29L8.06%2C18.67L7.38%2C19.13L6.11%2C20H3A1%2C1%200%200%2C1%202%2C19A1%2C1%200%200%2C1%203%2C18H5.22L8.16%2C16.04L11.86%2C13.58L12.81%2C12.95L12.5%2C12.64L11.09%2C11.23L10.8%2C10.94L9.39%2C9.53L8.69%2C8.83L7.28%2C7.42L6.57%2C6.72L5.16%2C5.31L4.46%2C4.61L3.05%2C3.2L4.46%2C1.79L5.87%2C3.2L6.57%2C3.9L7.98%2C5.31L8.69%2C6.01L10.1%2C7.42L10.8%2C8.12L12.21%2C9.53L12.92%2C10.23L14.33%2C11.64L15.27%2C12.58L16.21%2C13.52L21.97%2C14.67C22.5%2C14.78%2022.86%2C15.3%2022.75%2C15.83C22.66%2C16.27%2022.27%2C16.58%2021.82%2C16.58C21.74%2C16.58%2021.66%2C16.57%2021.58%2C16.55V16.55M12.5%2C12.64L13.44%2C13.58L14.38%2C14.52L14.11%2C14.7L13.17%2C13.76L12.23%2C12.82L12.5%2C12.64Z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M21.58%2C16.09L14.42%2C14.66L14.22%2C14.58L13.95%2C14.76L10.25%2C17.22L10.14%2C17.29L8.06%2C18.67L7.38%2C19.13L6.11%2C20H3A1%2C1%200%200%2C1%202%2C19A1%2C1%200%200%2C1%203%2C18H5.22L8.16%2C16.04L11.86%2C13.58L12.81%2C12.95L12.5%2C12.64L11.09%2C11.23L10.8%2C10.94L9.39%2C9.53L8.69%2C8.83L7.28%2C7.42L6.57%2C6.72L5.16%2C5.31L4.46%2C4.61L3.05%2C3.2L4.46%2C1.79L5.87%2C3.2L6.57%2C3.9L7.98%2C5.31L8.69%2C6.01L10.1%2C7.42L10.8%2C8.12L12.21%2C9.53L12.92%2C10.23L14.33%2C11.64L15.27%2C12.58L16.21%2C13.52L21.97%2C14.67C22.5%2C14.78%2022.86%2C15.3%2022.75%2C15.83C22.66%2C16.27%2022.27%2C16.58%2021.82%2C16.58C21.74%2C16.58%2021.66%2C16.57%2021.58%2C16.55V16.55M12.5%2C12.64L13.44%2C13.58L14.38%2C14.52L14.11%2C14.7L13.17%2C13.76L12.23%2C12.82L12.5%2C12.64Z%22/%3E%3C/svg%3E'); }
.artifact { -webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2C2L4.5%2C20.29L5.21%2C21L12%2C18L18.79%2C21L19.5%2C20.29L12%2C2M12%2C5.83L17.07%2C18.17L12%2C16.5L6.93%2C18.17L12%2C5.83Z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2C2L4.5%2C20.29L5.21%2C21L12%2C18L18.79%2C21L19.5%2C20.29L12%2C2M12%2C5.83L17.07%2C18.17L12%2C16.5L6.93%2C18.17L12%2C5.83Z%22/%3E%3C/svg%3E'); }
.cat { -webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2C8L10.67%2C8.09C9.81%2C7.07%207.4%2C4.5%205%2C4.5C5%2C4.5%203.03%2C7.46%204.96%2C11.41C4.41%2C12.24%204.07%2C12.67%204%2C13.66L2.07%2C13.95L2.28%2C14.93L4.04%2C14.67L4.18%2C15.38L2.61%2C16.32L3.08%2C17.21L4.53%2C16.32C5.68%2C18.76%208.59%2C20%2012%2C20C15.41%2C20%2018.32%2C18.76%2019.47%2C16.32L20.92%2C17.21L21.39%2C16.32L19.82%2C15.38L19.96%2C14.67L21.72%2C14.93L21.93%2C13.95L20%2C13.66C19.93%2C12.67%2019.59%2C12.24%2019.04%2C11.41C20.97%2C7.46%2019%2C4.5%2019%2C4.5C16.6%2C4.5%2014.19%2C7.07%2013.33%2C8.09L12%2C8M9%2C11A1%2C1%200%200%2C1%2010%2C12A1%2C1%200%200%2C1%209%2C13A1%2C1%200%200%2C1%208%2C12A1%2C1%200%200%2C1%209%2C11M15%2C11A1%2C1%200%200%2C1%2016%2C12A1%2C1%200%200%2C1%2015%2C13A1%2C1%200%200%2C1%2014%2C12A1%2C1%200%200%2C1%2015%2C11M11%2C14H13L12.3%2C15.39C12.5%2C16.03%2013.06%2C16.5%2013.75%2C16.5A1.5%2C1.5%200%200%2C0%2015.25%2C15H15.75A2%2C2%200%200%2C1%2013.75%2C17C13%2C17%2012.35%2C16.59%2012%2C16V16H12C11.65%2C16.59%2011%2C17%2010.25%2C17A2%2C2%200%200%2C1%208.25%2C15H8.75A1.5%2C1.5%200%200%2C0%2010.25%2C16.5C10.94%2C16.5%2011.5%2C16.03%2011.7%2C15.39L11%2C14Z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2C8L10.67%2C8.09C9.81%2C7.07%207.4%2C4.5%205%2C4.5C5%2C4.5%203.03%2C7.46%204.96%2C11.41C4.41%2C12.24%204.07%2C12.67%204%2C13.66L2.07%2C13.95L2.28%2C14.93L4.04%2C14.67L4.18%2C15.38L2.61%2C16.32L3.08%2C17.21L4.53%2C16.32C5.68%2C18.76%208.59%2C20%2012%2C20C15.41%2C20%2018.32%2C18.76%2019.47%2C16.32L20.92%2C17.21L21.39%2C16.32L19.82%2C15.38L19.96%2C14.67L21.72%2C14.93L21.93%2C13.95L20%2C13.66C19.93%2C12.67%2019.59%2C12.24%2019.04%2C11.41C20.97%2C7.46%2019%2C4.5%2019%2C4.5C16.6%2C4.5%2014.19%2C7.07%2013.33%2C8.09L12%2C8M9%2C11A1%2C1%200%200%2C1%2010%2C12A1%2C1%200%200%2C1%209%2C13A1%2C1%200%200%2C1%208%2C12A1%2C1%200%200%2C1%209%2C11M15%2C11A1%2C1%200%200%2C1%2016%2C12A1%2C1%200%200%2C1%2015%2C13A1%2C1%200%200%2C1%2014%2C12A1%2C1%200%200%2C1%2015%2C11M11%2C14H13L12.3%2C15.39C12.5%2C16.03%2013.06%2C16.5%2013.75%2C16.5A1.5%2C1.5%200%200%2C0%2015.25%2C15H15.75A2%2C2%200%200%2C1%2013.75%2C17C13%2C17%2012.35%2C16.59%2012%2C16V16H12C11.65%2C16.59%2011%2C17%2010.25%2C17A2%2C2%200%200%2C1%208.25%2C15H8.75A1.5%2C1.5%200%200%2C0%2010.25%2C16.5C10.94%2C16.5%2011.5%2C16.03%2011.7%2C15.39L11%2C14Z%22/%3E%3C/svg%3E'); }

/* Tooltip */
.tooltip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-dark);
    color: var(--energy-dark);
    padding: 8px 12px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    border: 2px solid var(--energy-dark);
    box-shadow: 3px 3px 0 var(--energy-dark);
    z-index: 10;
}

.tooltip:hover::after {
    opacity: 1;
}

/* Quest List */
.quest-list {
    list-style: none;
}

.quest-item {
    position: relative;
    padding: 20px 20px 20px 50px;
    margin-bottom: 20px;
    background: var(--glass-bg);
    border: 2px solid var(--energy-dark);
    box-shadow: 4px 4px 0 rgba(96, 108, 56, 0.15);
    transition: all 0.2s;
}

.quest-item:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 rgba(96, 108, 56, 0.2);
}

.quest-status {
    position: absolute;
    left: 15px;
    top: 25px;
    width: 20px;
    height: 20px;
    background: var(--bg-dark);
    border: 2px solid var(--energy-dark);
}

.quest-item.completed .quest-status {
    background: var(--energy);
}

.quest-item.completed .quest-status::after {
    content: '✓';
    position: absolute;
    color: var(--bg-dark);
    font-weight: bold;
    left: 3px;
    top: -2px;
}

.quest-item.active {
    border-color: var(--accent-pink);
    background: var(--ui-panel);
}

.quest-item.active .quest-status {
    border-color: var(--accent-pink);
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
    0%, 100% { background: var(--bg-dark); }
    50% { background: rgba(226, 149, 120, 0.3); }
}

.quest-content strong {
    font-size: 1.3rem;
    color: var(--text-main);
}

.highlight {
    color: var(--brass-dark);
    font-family: 'VT323', monospace;
    font-size: 1.3rem;
    display: block;
    margin-top: 5px;
}

.quest-rewards {
    margin-top: 10px;
    font-family: 'Press Start 2P', monospace;
    color: var(--energy-dark);
    font-size: 0.6rem;
    background: var(--brass-light);
    display: inline-block;
    padding: 6px 10px;
    border: 2px solid var(--energy-dark);
}

/* Project Capsules */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.project-capsule {
    background: var(--energy-dark);
    padding: 4px;
    box-shadow: 6px 6px 0 rgba(96, 108, 56, 0.3);
    transition: transform 0.2s ease;
}

.project-capsule:hover {
    transform: translate(-4px, -4px);
    box-shadow: 10px 10px 0 rgba(96, 108, 56, 0.3);
}

.capsule-glass {
    background: var(--glass-bg);
    height: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--bg-dark);
}

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

.capsule-glass h3 {
    color: var(--text-main);
    font-size: 1.6rem;
}

.rank-badge {
    background: var(--accent-pink);
    color: var(--bg-dark);
    padding: 4px 10px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    border: 2px solid var(--text-main);
}

.capsule-glass p {
    font-size: 1.1rem;
    color: var(--text-main);
    margin-bottom: 20px;
    flex-grow: 1;
}

.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.tech-pill {
    background: var(--ui-panel);
    border: 2px solid var(--energy-dark);
    color: var(--energy-dark);
    padding: 4px 12px;
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    font-weight: bold;
}

.energy-meter {
    height: 12px;
    background: var(--bg-dark);
    border: 2px solid var(--energy-dark);
    margin-top: auto;
    padding: 2px;
}

.energy-meter .fill {
    height: 100%;
    background: var(--energy);
}

/* Footer */
.hud-footer {
    text-align: center;
    padding: 50px 20px;
    position: relative;
    background: linear-gradient(to top, rgba(254, 250, 224, 0.98), transparent);
}

body.night-mode .hud-footer {
    background: linear-gradient(to top, rgba(5, 13, 9, 0.98), transparent);
}

.footer-line {
    width: 150px;
    height: 4px;
    background: var(--energy-dark);
    margin: 0 auto 20px;
}

.footer-small {
    font-family: 'Press Start 2P', monospace;
    color: var(--energy-dark);
    margin-top: 15px;
    font-size: 0.6rem;
}

@media (max-width: 768px) {
    .hud-nav {
        flex-direction: column;
        gap: 15px;
        padding: 1rem;
    }
    .terminal-content {
        flex-direction: column;
        text-align: center;
    }
    .terminal-content h1 { font-size: 2.5rem; }
    .stats-grid { justify-content: center; }
    .environment-container { margin-top: 180px; }
}