/* ==========================================
   StarVX.Dev Portfolio Styles
   Clean, Human-Readable CSS
   ========================================== */

/* ==========================================
   CSS Custom Properties (Variables)
   ========================================== */

:root {
    /* Dark Theme (Default) */
    --bg: #0d0d0d;
    --fg: #e4e3e3;
    --fg-muted: #a3a3a3;
    --fg-faint: #6c6a6b;

    --accent: #9b4dca;
    --accent-hover: #b366d9;
    --accent-glow: rgba(155, 77, 202, 0.4);

    --card-bg: #151515;
    --card-border: #252525;

    --button-bg: #1a1a1a;
    --button-border: #333333;

    --table-row-alt: #1a1a1a;
    --header-bg: #0d0d0d;
}

/* Light Theme */
[data-theme="light"] {
    --bg: #f5f5f5;
    --fg: #1a1a1a;
    --fg-muted: #555555;
    --fg-faint: #888888;

    --accent: #7b2cbf;
    --accent-hover: #5a189a;
    --accent-glow: rgba(123, 44, 191, 0.3);

    --card-bg: #ffffff;
    --card-border: #e0e0e0;

    --button-bg: #ffffff;
    --button-border: #d0d0d0;

    --table-row-alt: #f9f9f9;
    --header-bg: #f5f5f5;
}


/* ==========================================
   Base Styles / Reset
   ========================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--fg);
    font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}


/* ==========================================
   Layout
   ========================================== */

.site-wrapper {
    position: relative;
}

.page-wrapper {
    max-width: 56rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.two-column-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.75rem;
    margin-top: 0;
}

@media (min-width: 768px) {
    .two-column-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ==========================================
   Header
   ========================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background: var(--header-bg);
    border-bottom: 1px solid var(--card-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}


/* ==========================================
   Logo
   ========================================== */

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fg);
    text-decoration: none;
    transition: color 0.3s ease;
}

.logo-accent {
    color: var(--accent);
    transition: color 0.3s ease;
}

.logo-image {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    filter: drop-shadow(0 0 8px var(--accent-glow));
    transition: filter 0.3s ease;
}

.logo:hover .logo-image {
    filter: drop-shadow(0 0 12px var(--accent));
}


/* ==========================================
   Navigation Links
   ========================================== */

.nav-link {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    color: var(--fg-muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.nav-link:hover {
    color: var(--fg);
    background: rgba(128, 128, 128, 0.1);
}


/* ==========================================
   Theme Toggle Button
   ========================================== */

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--button-bg);
    border: 1px solid var(--button-border);
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    color: var(--fg);
    transition: all 0.2s ease;
}

.theme-toggle:hover {
    border-color: var(--accent);
    background: var(--card-bg);
}

.theme-toggle svg {
    transition: transform 0.3s ease;
}

.theme-toggle:hover svg {
    transform: rotate(15deg);
}


/* ==========================================
   Cursor Toggle Button
   ========================================== */

.cursor-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--button-bg);
    border: 1px solid var(--button-border);
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    color: var(--fg);
    transition: all 0.2s ease;
    position: relative;
    overflow: visible;
}

.cursor-toggle:hover {
    border-color: var(--accent);
    background: var(--card-bg);
    transform: scale(1.05);
}

.cursor-toggle:active {
    transform: scale(0.95);
}

.cursor-toggle svg {
    transition: transform 0.3s ease;
}

.cursor-toggle:hover svg {
    transform: rotate(-15deg);
}

/* Wiggle animation when cursor changes */
.cursor-toggle.wiggle {
    animation: wiggle 0.5s ease-in-out;
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg) scale(1.1); }
    50% { transform: rotate(10deg) scale(1.1); }
    75% { transform: rotate(-5deg) scale(1.05); }
}

.music-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--button-bg);
    border: 1px solid var(--button-border);
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    color: var(--fg);
    transition: all 0.2s ease;
}

.music-toggle:hover {
    border-color: var(--accent);
    background: var(--card-bg);
}

.music-toggle.playing {
    color: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}


/* ==========================================
   Cursor Particles
   ========================================== */

#particle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.cursor-particle {
    position: absolute;
    pointer-events: none;
    font-size: 1.5rem;
    animation: particle-burst 0.8s ease-out forwards;
    z-index: 10000;
}

@keyframes particle-burst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0) rotate(var(--rot));
    }
}

/* Cursor trail particles that follow the mouse briefly */
.cursor-trail {
    position: fixed;
    pointer-events: none;
    font-size: 1rem;
    animation: trail-fade 0.6s ease-out forwards;
    z-index: 9998;
}

@keyframes trail-fade {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.3);
    }
}


/* ==========================================
   Cards / Sections
   ========================================== */

.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-top: 1.75rem;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.card h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fg);
    position: relative;
    padding-left: 0;
    transition: color 0.3s ease;
}

/* Accent line above headings */
.card h2::before {
    content: "";
    position: absolute;
    top: -0.75rem;
    left: 0;
    width: 2rem;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
    transition: background-color 0.3s ease;
}

.section-text {
    font-size: 1.0625rem;
    margin-top: 0.5rem;
    color: var(--fg);
}


/* ==========================================
   Buttons
   ========================================== */

.button {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--button-bg);
    border: 1px solid var(--button-border);
    border-radius: 0.5rem;
    color: var(--fg);
    text-align: center;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.button:hover {
    background: var(--card-bg);
    border-color: var(--accent);
}

.button-accent {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

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

.button-stack {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.25rem;
}


/* ==========================================
   Playground Portal
   ========================================== */

.portal-section {
    margin-top: 1.75rem;
    padding: 1.5rem;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--card-border));
    border-radius: 1rem;
    background:
        radial-gradient(circle at 16% 20%, rgba(155, 77, 202, 0.24), transparent 34%),
        radial-gradient(circle at 86% 24%, rgba(0, 220, 255, 0.16), transparent 30%),
        linear-gradient(135deg, var(--card-bg), var(--button-bg));
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
}

.portal-intro h1 {
    font-size: clamp(2.2rem, 7vw, 4.4rem);
    line-height: 0.95;
}

.portal-intro p {
    max-width: 42rem;
    margin-top: 0.75rem;
    color: var(--fg-muted);
    font-size: 1.08rem;
}

.portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.portal-card {
    position: relative;
    min-height: 13rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.5rem;
    overflow: hidden;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.9rem;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)),
        #111;
    color: white;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.portal-card::before {
    content: "";
    position: absolute;
    inset: -30% -20% auto auto;
    width: 9rem;
    height: 9rem;
    background: var(--accent);
    border-radius: 999px;
    filter: blur(35px);
    opacity: 0.32;
}

.portal-card.hot::before {
    background: #ffb000;
}

.portal-card.paint::before {
    background: #22d3ee;
}

.portal-card.os-card::before {
    background: #ff4fd8;
}

.portal-card.room-card::before { background: #40ff87; }
.portal-card.games-card::before { background: #ffb000; }
.portal-card.lore-card::before { background: #8b5cf6; }
.portal-card.rpg-card::before { background: #38bdf8; }
.portal-card.theme-card::before { background: #f97316; }
.portal-card.gravity-card::before { background: #38bdf8; }
.portal-card.vehicle-card::before { background: #ef4444; }

.portal-card:hover {
    transform: translateY(-4px) rotate(-1deg);
    border-color: var(--accent);
}

.portal-icon {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: 2.4rem;
}

.portal-title {
    position: relative;
    font-size: 1.35rem;
    font-weight: 800;
}

.portal-copy {
    position: relative;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.92rem;
}

.lore-network {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.75rem;
    padding: 1rem;
    border: 1px solid rgba(139, 92, 246, 0.45);
    border-radius: 1rem;
    background:
        radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.22), transparent 32%),
        rgba(255, 255, 255, 0.06);
}


/* ==========================================
   Guestbook & Theme Lab
   ========================================== */

.guestbook-body {
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 79, 216, 0.22), transparent 30%),
        radial-gradient(circle at 84% 20%, rgba(64, 255, 135, 0.16), transparent 32%),
        #080812;
}

.guestbook-hero,
.theme-lab-hero {
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, 0.08);
}

.guestbook-hero h1,
.theme-lab-hero h1 {
    font-size: clamp(3rem, 10vw, 7rem);
    line-height: 0.9;
}

.guestbook-hero p,
.theme-lab-hero p {
    max-width: 42rem;
    margin-top: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
}

.guestbook-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(320px, 1.25fr);
    gap: 1rem;
    margin-top: 1rem;
}

.guestbook-form,
.guestbook-wall,
.theme-controls,
.theme-preview {
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.08);
}

.guestbook-form {
    display: grid;
    gap: 0.9rem;
    align-self: start;
}

.guestbook-form label,
.theme-controls label {
    display: grid;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.76);
    font-weight: 800;
}

.guestbook-form input,
.guestbook-form textarea,
.guestbook-form select,
.theme-controls input {
    min-height: 2.7rem;
    padding: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.65rem;
    background: rgba(0, 0, 0, 0.38);
    color: white;
    font: inherit;
}

.guestbook-form textarea {
    min-height: 8rem;
    resize: vertical;
}

.guestbook-row,
.theme-button-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.guestbook-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.85rem;
    align-content: start;
    min-height: 28rem;
}

.guest-note {
    position: relative;
    min-height: 12rem;
    padding: 1rem;
    border-radius: 0.8rem;
    background: #fff4a8;
    color: #201800;
    transform: rotate(var(--note-tilt, -1deg));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.guest-note:nth-child(2n) { --note-tilt: 1.5deg; }
.guest-note.loud { background: #ff8a8a; }
.guest-note.haunted { background: #bda4ff; }
.guest-note.sparkly { background: #a7f3d0; }

.guest-stamp {
    position: absolute;
    right: 0.7rem;
    top: 0.55rem;
    font-size: 1.5rem;
}

.guest-note h2 {
    padding-right: 2rem;
}

.guest-note p {
    margin-top: 0.7rem;
}

.guest-note small {
    display: block;
    margin-top: 1rem;
    opacity: 0.66;
}

.guestbook-empty {
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    min-height: 20rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

.theme-lab-body {
    background:
        radial-gradient(circle at 20% 20%, var(--accent-glow), transparent 32%),
        #080812;
}

.settings-body {
    background:
        radial-gradient(circle at 20% 18%, var(--accent-glow), transparent 30%),
        radial-gradient(circle at 82% 22%, rgba(56, 189, 248, 0.14), transparent 32%),
        #080812;
}

.settings-hero {
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, 0.08);
}

.settings-hero h1 {
    font-size: clamp(3rem, 10vw, 7rem);
    line-height: 0.9;
}

.settings-hero p {
    margin-top: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.settings-panel {
    display: grid;
    gap: 1rem;
    align-content: start;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.08);
}

.settings-panel label {
    display: grid;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.76);
    font-weight: 800;
}

.settings-panel input {
    min-height: 2.6rem;
}

.settings-toggle {
    min-height: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.7rem;
    background: rgba(0, 0, 0, 0.34);
    color: white;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}

.settings-toggle:hover {
    border-color: var(--accent);
}

.preview-panel {
    place-items: center;
}

.gravity-body {
    overflow: hidden;
    background: #02040a;
}

.forge-shell {
    min-height: 100vh;
    padding: 0.75rem;
}

.forge-nav {
    justify-content: flex-start;
    padding: 0 0 0.75rem;
}

.forge-layout {
    display: grid;
    grid-template-columns: 20rem minmax(0, 1fr);
    gap: 0.75rem;
    height: calc(100vh - 4.5rem);
}

.forge-panel {
    display: grid;
    gap: 0.9rem;
    align-content: start;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.08);
}

.forge-panel h1 {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    line-height: 0.9;
}

.forge-panel p,
.forge-panel label {
    color: rgba(255, 255, 255, 0.76);
}

.forge-tools,
.forge-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem;
}

.forge-tools button,
.forge-actions button {
    min-height: 2.8rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.7rem;
    background: rgba(0, 0, 0, 0.34);
    color: white;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}

.forge-tools button.active,
.forge-tools button:hover,
.forge-actions button:hover {
    background: var(--accent);
}

.forge-canvas {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1rem;
    background: #04050c;
    cursor: crosshair;
    touch-action: none;
}

@media (max-width: 820px) {
    .gravity-body {
        overflow: auto;
    }

    .forge-layout {
        grid-template-columns: 1fr;
        height: auto;
    }

    .forge-canvas {
        min-height: 32rem;
    }
}


/* ==========================================
   Street Forge Driving Game
   ========================================== */

.driver-body {
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 12%, rgba(239, 68, 68, 0.18), transparent 30%),
        radial-gradient(circle at 84% 18%, rgba(64, 255, 135, 0.12), transparent 32%),
        #06070b;
    color: white;
    font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.driver-shell {
    min-height: 100vh;
    padding: 0.75rem;
}

.driver-hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.4rem;
    padding: 0 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.07);
}

.driver-hud a {
    color: white;
    text-decoration: none;
    font-weight: 900;
}

.driver-readouts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.driver-readouts span {
    padding: 0.45rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    color: rgba(255, 255, 255, 0.7);
}

.driver-readouts strong {
    color: #40ff87;
}

.driver-layout {
    display: grid;
    grid-template-columns: 20rem minmax(0, 1fr);
    gap: 0.75rem;
    height: calc(100vh - 4.9rem);
    margin-top: 0.75rem;
}

.driver-garage,
.driver-stage {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.075);
}

.driver-garage {
    display: grid;
    gap: 0.9rem;
    align-content: start;
    overflow: auto;
    padding: 1rem;
}

.driver-garage h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 0.9;
}

.driver-garage p,
.driver-garage label {
    color: rgba(255, 255, 255, 0.76);
}

.driver-garage label {
    display: grid;
    gap: 0.35rem;
    font-weight: 800;
}

.driver-garage input[type="range"] {
    accent-color: #40ff87;
}

.garage-presets,
.driver-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.garage-presets button,
.driver-buttons button {
    min-height: 2.8rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.7rem;
    background: rgba(0, 0, 0, 0.34);
    color: white;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}

.garage-presets button.active,
.garage-presets button:hover,
.driver-buttons button:hover {
    background: #40ff87;
    color: #07100b;
}

.driver-help {
    display: grid;
    gap: 0.25rem;
    padding: 0.85rem;
    border-radius: 0.8rem;
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.72);
}

.driver-help strong {
    color: white;
}

.driver-stage {
    position: relative;
    overflow: hidden;
    min-height: 0;
}

.driver-canvas {
    width: 100%;
    height: 100%;
    display: block;
    background: #101319;
}

.driver-toast {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    max-width: min(34rem, calc(100% - 2rem));
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.64);
    transform: translateX(-50%);
    text-align: center;
    color: white;
    backdrop-filter: blur(12px);
}

@media (max-width: 980px) {
    .driver-body {
        overflow: auto;
    }

    .driver-layout {
        grid-template-columns: 1fr;
        height: auto;
    }

    .driver-stage {
        min-height: 34rem;
    }
}

/* ==========================================
   Junkyard Tycoon
   ========================================== */

.junkyard-body {
    min-height: 100vh;
    background:
        linear-gradient(rgba(5, 7, 10, 0.76), rgba(5, 7, 10, 0.92)),
        url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Abandoned_cars_in_a_junkyard_with_exhaust_pipe_visible_in_the_foreground.jpg/1280px-Abandoned_cars_in_a_junkyard_with_exhaust_pipe_visible_in_the_foreground.jpg"),
        radial-gradient(circle at 14% 12%, rgba(248, 113, 22, 0.28), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(45, 212, 191, 0.18), transparent 32%),
        linear-gradient(135deg, #121714, #19130d 54%, #080a0d);
    background-size: cover, cover, auto, auto, auto;
    background-attachment: fixed;
    color: #f6efe4;
    font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.junkyard-shell {
    width: min(1680px, calc(100% - 1.5rem));
    margin: 0 auto;
    padding: 0.75rem 0 2rem;
}

.junkyard-topbar,
.junkyard-hero,
.yard-panel,
.yard-log-wrap {
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 0.9rem;
    background: rgba(12, 13, 13, 0.76);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}

.junkyard-topbar {
    position: sticky;
    top: 0.75rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.4rem;
    padding: 0.55rem 0.75rem;
    backdrop-filter: blur(18px);
}

.junkyard-topbar a {
    color: white;
    text-decoration: none;
    font-weight: 900;
}

.yard-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.yard-stats span,
.panel-heading span {
    padding: 0.42rem 0.62rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.9rem;
}

.yard-stats strong {
    color: #ffe08a;
}

.junkyard-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: 1rem;
    margin-top: 0.75rem;
    padding: clamp(1rem, 3vw, 2rem);
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(6, 8, 10, 0.74), rgba(6, 8, 10, 0.3) 58%, rgba(6, 8, 10, 0.82)),
        url("https://upload.wikimedia.org/wikipedia/commons/c/c8/Auto_repair_shop.jpg"),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 46px),
        linear-gradient(135deg, #283027, #6b3b1c 58%, #11161b);
    background-size: cover, cover, auto, auto;
    background-position: center, center, center, center;
}

.yard-kicker {
    color: #8ff0d2;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.junkyard-hero h1 {
    max-width: 11ch;
    font-size: clamp(3.3rem, 10vw, 8rem);
    line-height: 0.83;
}

.junkyard-hero p {
    max-width: 48rem;
    color: rgba(255, 255, 255, 0.76);
}

.yard-goal {
    display: grid;
    align-content: center;
    gap: 0.75rem;
    min-height: 10rem;
    padding: 1rem;
    border: 1px solid rgba(255, 224, 138, 0.25);
    border-radius: 0.8rem;
    background: rgba(0, 0, 0, 0.34);
}

.yard-goal strong {
    color: #ffe08a;
    font-size: 1.5rem;
}

.yard-command {
    display: grid;
    grid-template-columns: 0.9fr 1.35fr 1.1fr 0.9fr;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.career-card {
    min-height: 15rem;
    padding: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 0.9rem;
    background: rgba(8, 9, 10, 0.78);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25);
}

.career-card h2 {
    margin-bottom: 0.7rem;
    font-size: 1.05rem;
}

.strategy-buttons,
.upgrade-shop {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem;
    max-height: 17rem;
    overflow: auto;
}

.strategy-buttons button,
.upgrade-shop button {
    display: grid;
    gap: 0.22rem;
    min-height: 4.4rem;
    padding: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.06);
    color: white;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.upgrade-shop button {
    position: relative;
    border-left: 4px solid rgba(143, 240, 210, 0.45);
}

.upgrade-shop button small {
    color: #8ff0d2;
    font-weight: 900;
    text-transform: uppercase;
}

.strategy-buttons button:hover,
.strategy-buttons button.active,
.upgrade-shop button:hover {
    border-color: #8ff0d2;
    background: rgba(143, 240, 210, 0.12);
}

.upgrade-shop button.owned {
    border-color: rgba(242, 193, 78, 0.55);
    color: #ffe08a;
    cursor: default;
}

.upgrade-shop button.locked {
    opacity: 0.55;
    border-left-color: rgba(255, 255, 255, 0.18);
}

.strategy-buttons span,
.upgrade-shop span,
#eventPanel span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.8rem;
    line-height: 1.25;
}

#eventPanel {
    display: grid;
    gap: 0.5rem;
}

.worker-panel {
    display: grid;
    gap: 0.7rem;
    max-height: 17.5rem;
    overflow: auto;
}

.worker-panel h3 {
    font-size: 0.88rem;
    color: #ffe08a;
    text-transform: uppercase;
}

.worker-row,
.applicant-row {
    display: grid;
    gap: 0.45rem;
    padding: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.055);
}

.worker-row strong span,
.applicant-row strong span,
.seller-line span {
    color: #8ff0d2;
    font-size: 0.78rem;
    text-transform: uppercase;
}

.worker-row p,
.applicant-row p {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.82rem;
    line-height: 1.3;
}

.worker-row select {
    min-height: 2.3rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.4);
    color: white;
}

.worker-row button,
.applicant-row button {
    min-height: 2.35rem;
    border: 0;
    border-radius: 0.5rem;
    background: #f2c14e;
    color: #15110b;
    font-weight: 900;
}

.event-photo {
    min-height: 6rem;
    border-radius: 0.65rem;
    background:
        linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.46)),
        url("https://commons.wikimedia.org/wiki/Special:Redirect/file/Car_Show.jpg?width=900");
    background-size: cover;
    background-position: center;
}

.yard-warning {
    color: #ffb4a0;
    font-size: 0.92rem;
}

.yard-game-over .junkyard-hero,
.yard-won .junkyard-hero {
    border-color: rgba(255, 224, 138, 0.58);
}

.yard-game-over .junkyard-hero::after,
.yard-won .junkyard-hero::after {
    content: "RUN LOST";
    position: absolute;
    right: clamp(1rem, 5vw, 4rem);
    bottom: clamp(1rem, 4vw, 2rem);
    padding: 0.45rem 0.85rem;
    border: 2px solid currentColor;
    border-radius: 0.45rem;
    color: #ff6b57;
    font-weight: 900;
    font-size: clamp(1.4rem, 4vw, 3rem);
    transform: rotate(-7deg);
}

.yard-won .junkyard-hero::after {
    content: "RUN WON";
    color: #8ff0d2;
}

.junkyard-layout {
    display: grid;
    grid-template-columns: minmax(330px, 1.05fr) minmax(260px, 0.72fr) minmax(420px, 1.35fr) minmax(290px, 0.9fr);
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.yard-panel {
    min-height: 34rem;
    padding: 0.8rem;
    overflow: hidden;
    animation: yardPanelIn 0.38s ease both;
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.panel-heading h2,
.yard-log-wrap h2 {
    font-size: 1.15rem;
    line-height: 1;
}

.panel-heading button,
.yard-goal button,
.yard-vehicle button,
.offer-card button,
.workshop-actions button {
    min-height: 2.55rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.55rem;
    background: #f2c14e;
    color: #15110b;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}

.panel-heading button:hover,
.yard-goal button:hover,
.yard-vehicle button:hover,
.offer-card button:hover,
.workshop-actions button:hover {
    background: #8ff0d2;
}

.vehicle-list,
.offer-list {
    display: grid;
    gap: 0.65rem;
    max-height: 42rem;
    overflow: auto;
    padding-right: 0.2rem;
}

.market-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8rem;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}

.market-toolbar input,
.market-toolbar select {
    min-height: 2.6rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.55rem;
    background: rgba(0, 0, 0, 0.38);
    color: white;
    padding: 0 0.65rem;
    font: inherit;
}

.yard-vehicle {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.75rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
        rgba(255, 255, 255, 0.052);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.yard-vehicle.marketplace-post {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.85rem;
    background:
        linear-gradient(135deg, rgba(26, 32, 35, 0.92), rgba(10, 11, 12, 0.82)),
        rgba(255, 255, 255, 0.06);
}

.marketplace-post .car-art {
    min-height: 12rem;
}

.seller-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.market-gallery {
    display: grid;
    grid-template-columns: 1.35fr repeat(4, 0.65fr);
    gap: 0.35rem;
    min-height: 4.5rem;
}

.market-gallery img {
    width: 100%;
    height: 100%;
    min-height: 4.5rem;
    object-fit: cover;
    border-radius: 0.45rem;
    filter: saturate(0.9) contrast(1.05);
}

.market-gallery img:first-child {
    min-height: 6rem;
}

.yard-vehicle:hover {
    transform: translateY(-2px);
    border-color: rgba(242, 193, 78, 0.55);
}

.yard-vehicle {
    animation: listingSlide 0.28s ease both;
}

.yard-vehicle.selected {
    border-color: #8ff0d2;
    box-shadow: 0 0 0 1px rgba(143, 240, 210, 0.22);
}

.yard-vehicle button {
    grid-column: 1 / -1;
}

.vehicle-info {
    display: grid;
    align-content: center;
    gap: 0.2rem;
    min-width: 0;
}

.vehicle-info strong {
    line-height: 1.1;
}

.vehicle-info span,
.offer-card span,
.empty-yard,
.workshop-empty {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.9rem;
}

.car-art {
    --paint: #d94848;
    --rust: 40%;
    position: relative;
    min-height: 5.4rem;
    overflow: hidden;
    border-radius: 0.6rem;
    background:
        radial-gradient(circle at 82% 18%, rgba(255, 224, 138, 0.36), transparent 12%),
        linear-gradient(18deg, transparent 0 42%, rgba(0, 0, 0, 0.18) 42% 45%, transparent 45%),
        linear-gradient(to top, #38301f 0 26%, transparent 26%),
        linear-gradient(135deg, #6b7c6f, #2e3a36);
}

.car-art.large {
    min-height: 16rem;
    border-radius: 0.8rem;
}

.car-sky {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 16%, rgba(255, 224, 138, 0.75), transparent 10%),
        linear-gradient(180deg, rgba(148, 190, 181, 0.45), transparent 55%);
}

.car-shadow {
    position: absolute;
    left: 14%;
    right: 12%;
    bottom: 13%;
    height: 12%;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    filter: blur(5px);
}

.car-photo-wrap {
    position: absolute;
    left: 8%;
    right: 7%;
    bottom: 16%;
    height: 62%;
    display: grid;
    place-items: end center;
    filter: drop-shadow(0 14px 9px rgba(0, 0, 0, 0.46));
}

.car-photo-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: normal;
}

.car-art:not(.large) .car-photo-wrap {
    left: 5%;
    right: 5%;
    bottom: 12%;
    height: 66%;
}

.car-art.large .car-photo-wrap {
    bottom: 13%;
    height: 72%;
}

.car-art.large .car-photo-wrap img {
    transform: scale(1.08);
    animation: carIdle 3.8s ease-in-out infinite;
}

.car-body-shape {
    position: absolute;
    left: 12%;
    right: 10%;
    bottom: 22%;
    height: 34%;
    border-radius: 18% 24% 12% 12%;
    background:
        linear-gradient(90deg, rgba(126, 70, 30, calc(var(--rust) / 110)) 0 var(--rust), transparent var(--rust)),
        var(--paint);
    box-shadow: inset 0 -10px 0 rgba(0, 0, 0, 0.24);
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.28));
}

.car-art.large .car-body-shape {
    height: 32%;
    bottom: 24%;
}

.car-cabin {
    position: absolute;
    left: 30%;
    top: -58%;
    width: 38%;
    height: 68%;
    border-radius: 45% 45% 8% 8%;
    background: linear-gradient(135deg, #dbeafe, #3b5360);
    border: 4px solid rgba(0, 0, 0, 0.24);
}

.car-hood {
    position: absolute;
    right: 2%;
    top: 24%;
    width: 16%;
    height: 18%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.3);
}

.wheel {
    position: absolute;
    bottom: -28%;
    width: 24%;
    aspect-ratio: 1;
    border: 0.45rem solid #101113;
    border-radius: 999px;
    background: #8b949e;
}

.wheel.front { right: 12%; }
.wheel.rear { left: 13%; }

.car-body-shape b,
.car-photo-wrap b {
    position: absolute;
    width: 11%;
    aspect-ratio: 1;
    border-radius: 999px;
    border: 2px solid rgba(35, 24, 14, 0.55);
    background: rgba(144, 85, 34, 0.68);
}

.car-art em {
    position: absolute;
    left: 0.45rem;
    top: 0.35rem;
    padding: 0.18rem 0.4rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.48);
    color: white;
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 900;
}

.car-art > strong {
    position: absolute;
    right: 0.45rem;
    top: 0.35rem;
    padding: 0.18rem 0.4rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.54);
    color: #ffe08a;
    font-size: 0.72rem;
}

.workshop-view {
    display: grid;
    gap: 0.8rem;
}

.car-report {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.5rem;
}

.car-report span {
    display: grid;
    gap: 0.15rem;
    min-height: 3.35rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.6rem;
    background: rgba(0, 0, 0, 0.24);
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.88rem;
}

.car-report strong {
    color: #ffe08a;
    font-size: 0.78rem;
    text-transform: uppercase;
}

.fault-report {
    display: grid;
    gap: 0.4rem;
}

.fault-report p {
    display: grid;
    grid-template-columns: 5.8rem minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.055);
}

.fault-report strong {
    color: #ffb4a0;
}

.fault-report span {
    color: rgba(255, 255, 255, 0.75);
}

.condition-grid {
    display: grid;
    gap: 0.45rem;
}

.deep-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.5rem;
}

.deep-actions button {
    display: grid;
    gap: 0.25rem;
    min-height: 4rem;
    padding: 0.62rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 0.62rem;
    background: rgba(255, 255, 255, 0.06);
    color: white;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.deep-actions button:hover {
    border-color: #f2c14e;
    background: rgba(242, 193, 78, 0.12);
}

.deep-actions span {
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.8rem;
}

.condition-row {
    display: grid;
    grid-template-columns: 6.2rem minmax(0, 1fr) 2.4rem;
    align-items: center;
    gap: 0.55rem;
    color: rgba(255, 255, 255, 0.8);
}

.condition-row div {
    height: 0.78rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.38);
}

.condition-row i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ef4444, #f2c14e, #8ff0d2);
}

.workshop-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.workshop-actions button:nth-child(8) {
    grid-column: 1 / -1;
    background: #8ff0d2;
}

.offer-card {
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.75rem;
    background:
        linear-gradient(135deg, rgba(143, 240, 210, 0.08), rgba(242, 193, 78, 0.055)),
        rgba(255, 255, 255, 0.052);
}

.event-feed {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
}

.event-feed p {
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.58rem;
    background: rgba(143, 240, 210, 0.08);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.84rem;
}

.yard-log-wrap {
    margin-top: 0.75rem;
    padding: 0.9rem;
}

.yard-log {
    display: grid;
    gap: 0.35rem;
    max-height: 10rem;
    overflow: auto;
    margin-top: 0.6rem;
    color: rgba(255, 255, 255, 0.76);
}

.yard-log p {
    padding: 0.45rem 0.6rem;
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.22);
}

.mobile-yard-pad {
    position: sticky;
    bottom: 0.5rem;
    z-index: 20;
    display: none;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.75rem;
    padding: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.8rem;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(12px);
}

.mobile-yard-pad button {
    min-height: 2.65rem;
    border: 0;
    border-radius: 0.5rem;
    background: #f2c14e;
    color: #15110b;
    font: inherit;
    font-weight: 900;
}

.asset-credit {
    margin-top: 0.9rem;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.78rem;
}

.cutscene-overlay {
    position: fixed;
    inset: 0;
    z-index: 50000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background:
        radial-gradient(circle at 50% 25%, rgba(242, 193, 78, 0.18), transparent 36%),
        rgba(0, 0, 0, 0.82);
    animation: cutsceneFade 0.22s ease;
}

.cutscene-overlay.hidden {
    display: none;
}

.cutscene-card {
    width: min(42rem, 100%);
    padding: clamp(1.2rem, 4vw, 2rem);
    border: 1px solid rgba(255, 224, 138, 0.34);
    border-radius: 1rem;
    background:
        linear-gradient(135deg, rgba(30, 24, 16, 0.96), rgba(8, 11, 12, 0.96)),
        url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Abandoned_cars_in_a_junkyard_with_exhaust_pipe_visible_in_the_foreground.jpg/640px-Abandoned_cars_in_a_junkyard_with_exhaust_pipe_visible_in_the_foreground.jpg");
    background-size: cover;
    color: white;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.6);
    animation: cutscenePop 0.35s ease;
}

.cutscene-card span {
    color: #8ff0d2;
    font-weight: 900;
    text-transform: uppercase;
}

.cutscene-card h2 {
    margin-top: 0.4rem;
    font-size: clamp(2.2rem, 8vw, 5rem);
    line-height: 0.9;
}

.cutscene-card p {
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.08rem;
}

.cutscene-card button {
    min-height: 2.8rem;
    margin-top: 1rem;
    padding: 0 1rem;
    border: 0;
    border-radius: 0.6rem;
    background: #f2c14e;
    color: #15110b;
    font: inherit;
    font-weight: 900;
}

@keyframes cutsceneFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cutscenePop {
    from { opacity: 0; transform: translateY(1rem) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes yardPanelIn {
    from { opacity: 0; transform: translateY(0.75rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes listingSlide {
    from { opacity: 0; transform: translateX(-0.6rem); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes carIdle {
    0%, 100% { translate: 0 0; filter: saturate(1); }
    50% { translate: 0 -0.16rem; filter: saturate(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .yard-panel,
    .yard-vehicle,
    .car-art.large .car-photo-wrap img,
    .cutscene-overlay,
    .cutscene-card {
        animation: none;
    }
}

.junkyard-body .unlock-hud {
    top: auto;
    right: 1rem;
    bottom: 1rem;
}

.junkyard-body .unlock-panel {
    top: auto;
    bottom: 3.2rem;
}

/* Reference-style cockpit rebuild */

.cockpit-body {
    min-height: 100vh;
    overflow: auto;
    background:
        radial-gradient(circle at 50% -12%, rgba(173, 226, 57, 0.16), transparent 28%),
        linear-gradient(rgba(2, 8, 11, 0.86), rgba(2, 8, 11, 0.94)),
        url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Abandoned_cars_in_a_junkyard_with_exhaust_pipe_visible_in_the_foreground.jpg/1280px-Abandoned_cars_in_a_junkyard_with_exhaust_pipe_visible_in_the_foreground.jpg");
    background-size: auto, auto, cover;
    color: #d7dfd7;
    font-family: Rajdhani, 'Nunito Sans', sans-serif;
    letter-spacing: 0.01em;
}

.cockpit-shell {
    display: grid;
    grid-template-rows: 4rem minmax(34rem, 1fr) 9.4rem 2.2rem;
    gap: 0.45rem;
    width: 100%;
    min-height: 50rem;
    height: auto;
    padding: 0.45rem;
}

.cockpit-topbar,
.cockpit-panel,
.project-stage,
.workbench-panel,
.my-yard-strip,
.bottom-card,
.cockpit-footer {
    border: 1px solid rgba(153, 173, 167, 0.28);
    background:
        linear-gradient(180deg, rgba(9, 23, 27, 0.96), rgba(2, 12, 15, 0.94)),
        rgba(2, 12, 15, 0.94);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 14px 32px rgba(0, 0, 0, 0.34);
}

.cockpit-topbar {
    display: grid;
    grid-template-columns: 3.1rem minmax(13rem, 1.15fr) 9rem 10rem minmax(10rem, 1fr) 9rem 10rem 3rem;
    align-items: center;
    gap: 0.7rem;
    padding: 0 0.7rem;
}

.cockpit-level {
    display: grid;
    place-items: center;
    width: 2.8rem;
    aspect-ratio: 1;
    border: 2px solid #d8b22b;
    border-radius: 999px;
    color: white;
    text-decoration: none;
    font-size: 1.35rem;
    font-weight: 900;
    box-shadow: 0 0 0 4px rgba(216, 178, 43, 0.16), inset 0 0 18px rgba(216, 178, 43, 0.18);
}

.cockpit-stat {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
    padding-left: 0.7rem;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.cockpit-stat span,
.project-label,
.panel-title-row span,
.cockpit-footer span {
    color: #c8cfca;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cockpit-stat strong {
    color: #9be33b;
    font-size: 1.02rem;
    line-height: 1;
}

.cockpit-stat.cash strong {
    color: #9cff3c;
}

.cockpit-stat.danger strong {
    color: #ff5f4f;
}

.stat-meter,
.story-progress {
    height: 0.42rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.stat-meter i,
.story-progress i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f7c22d, #a4e236);
}

.cockpit-day {
    display: grid;
    place-items: center;
    border-inline: 1px solid rgba(255, 255, 255, 0.16);
    text-transform: uppercase;
}

.cockpit-day strong {
    color: #ffd33d;
    font-size: 1.25rem;
}

.cockpit-day span {
    color: #e4e0c9;
    font-size: 0.82rem;
}

.icon-button,
.ghost-button {
    min-height: 2.35rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 0.18rem;
    background: rgba(255, 255, 255, 0.06);
    color: white;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    text-transform: uppercase;
}

.cockpit-grid {
    display: grid;
    grid-template-columns: 27rem minmax(0, 1fr) 25.5rem;
    gap: 0.45rem;
    height: clamp(34rem, calc(100vh - 16.5rem), 50rem);
    min-height: 0;
}

.cockpit-panel,
.cockpit-center {
    min-height: 0;
}

.cockpit-panel {
    display: grid;
    align-content: start;
    overflow: hidden;
    border-radius: 0.22rem;
}

.panel-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0 0.65rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.panel-title-row h2 {
    color: #f4f4e8;
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.market-tabs,
.upgrade-tabs,
.workbench-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.1rem;
    padding: 0.35rem;
    background: rgba(0, 0, 0, 0.24);
}

.workbench-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 0;
}

.market-tabs button,
.upgrade-tabs button,
.workbench-tabs button {
    min-height: 2rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.64);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    text-transform: uppercase;
}

.market-tabs button.active,
.upgrade-tabs button.active,
.workbench-tabs button.active {
    border-bottom-color: #cbe62d;
    color: #eef7c6;
    background: linear-gradient(180deg, rgba(203, 230, 45, 0.08), transparent);
}

.market-cockpit .market-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem;
    gap: 0.35rem;
    margin: 0;
    padding: 0.45rem;
}

.market-cockpit .market-toolbar input,
.market-cockpit .market-toolbar select {
    min-height: 2.15rem;
    border-radius: 0.18rem;
    background: #07151a;
    color: #dce6df;
}

.marketplace-feed {
    max-height: none;
    overflow: auto;
    padding: 0.45rem;
}

.marketplace-feed .marketplace-post {
    grid-template-columns: 13.2rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.55rem;
    border-radius: 0.25rem;
    background: linear-gradient(180deg, rgba(10, 28, 34, 0.96), rgba(4, 14, 18, 0.96));
}

.marketplace-feed .marketplace-post .car-art {
    min-height: 7rem;
    grid-row: span 2;
}

.marketplace-feed .market-gallery {
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 2.6rem;
}

.marketplace-feed .market-gallery img,
.marketplace-feed .market-gallery img:first-child {
    min-height: 2.6rem;
}

.seller-line span {
    color: #cbe62d;
}

.sell-car-button {
    min-height: 2.5rem;
    margin: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.2rem;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    font: inherit;
    font-weight: 900;
    text-transform: uppercase;
}

.cockpit-center {
    display: grid;
    grid-template-rows: 23rem minmax(12rem, 1fr) 5.6rem;
    gap: 0.45rem;
    min-width: 0;
}

.project-stage {
    position: relative;
    overflow: hidden;
    border-radius: 0.22rem;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(1, 7, 9, 0.82)),
        url("https://upload.wikimedia.org/wikipedia/commons/c/c8/Auto_repair_shop.jpg");
    background-size: cover;
    background-position: center;
}

.project-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
}

.project-header h1 {
    margin-top: 0.1rem;
    color: white;
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    line-height: 0.9;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.38rem;
}

.project-tags span {
    padding: 0.22rem 0.42rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.15rem;
    background: rgba(0, 0, 0, 0.54);
    color: #e3dfc4;
    font-size: 0.82rem;
}

.project-stage .workshop-empty {
    position: absolute;
    inset: 42% auto auto 50%;
    z-index: 3;
    width: min(26rem, 90%);
    transform: translate(-50%, -50%);
    text-align: center;
    color: #eff5e8;
}

.project-stage .workshop-view {
    position: absolute;
    inset: 0;
    display: block;
}

.project-stage .large-car-art,
.project-stage .car-art.large {
    position: absolute;
    inset: 4rem 2rem 3.8rem;
    min-height: 0;
    background: transparent;
}

.project-stage .car-sky,
.project-stage .car-art em,
.project-stage .car-art > strong {
    display: none;
}

.project-stage .car-photo-wrap {
    left: 6%;
    right: 6%;
    top: 5.4rem;
    bottom: 4.95rem;
    height: auto;
    place-items: center;
}

.project-stage .car-photo-wrap img {
    width: auto;
    height: 100%;
    max-width: 92%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 26px 18px rgba(0, 0, 0, 0.75));
}

.project-stat-strip {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(5, 15, 18, 0.9);
    backdrop-filter: blur(12px);
}

.project-stat-strip span {
    display: grid;
    gap: 0.15rem;
    padding: 0.65rem;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    color: #aab6b2;
    font-size: 0.78rem;
    text-transform: uppercase;
}

.project-stat-strip strong {
    color: #f2f5de;
    font-size: 1.35rem;
}

.project-stat-strip span:nth-child(4) strong {
    color: #cbe62d;
}

.workbench-panel {
    overflow: hidden;
    border-radius: 0.22rem;
}

.workbench-grid {
    display: grid;
    grid-template-columns: 0.85fr 1fr 0.82fr;
    gap: 0.8rem;
    height: calc(100% - 2.2rem);
    padding: 0.75rem;
    overflow: auto;
}

.workbench-grid h3 {
    margin-bottom: 0.45rem;
    color: #f3d33c;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.condition-row {
    grid-template-columns: 6.4rem minmax(0, 1fr) 2.1rem;
    font-size: 0.9rem;
}

.condition-row div {
    height: 0.55rem;
    border-radius: 0;
}

.condition-row i {
    background: linear-gradient(90deg, #ef4d38, #ffd43a, #cbe62d);
}

.compact-report {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0.55rem;
}

.compact-report span,
.fault-report p,
.deep-actions button,
.offer-card,
.event-feed p {
    border-radius: 0.2rem;
    background: rgba(3, 20, 23, 0.72);
}

.deep-actions {
    margin-top: 0.55rem;
    max-height: 7.8rem;
    overflow: auto;
}

.deep-actions button {
    min-height: 3.2rem;
}

.workshop-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
}

.workshop-actions button {
    min-height: 2.45rem;
    border-radius: 0.2rem;
    background: linear-gradient(180deg, rgba(52, 112, 67, 0.86), rgba(24, 71, 38, 0.92));
    color: white;
    text-transform: uppercase;
}

.workshop-actions button:nth-child(8) {
    background: linear-gradient(180deg, #ffd536, #d8a415);
    color: #16170d;
}

.my-yard-strip {
    display: grid;
    grid-template-columns: 4.2rem minmax(0, 1fr);
    gap: 0.45rem;
    align-items: stretch;
    overflow: hidden;
    padding: 0.45rem;
    border-radius: 0.22rem;
}

.my-yard-strip h2 {
    align-self: center;
    color: #ffd536;
    font-size: 1.2rem;
    line-height: 0.9;
    text-transform: uppercase;
}

.my-yard-strip .garage-list {
    display: flex;
    gap: 0.45rem;
    max-height: none;
    overflow-x: auto;
}

.garage-list .yard-vehicle {
    flex: 0 0 9.2rem;
    grid-template-columns: 1fr;
    gap: 0.3rem;
    padding: 0.35rem;
}

.garage-list .car-art {
    min-height: 3.7rem;
}

.garage-list .vehicle-info span:nth-of-type(n+2),
.garage-list .market-gallery {
    display: none;
}

.garage-list .vehicle-info strong {
    font-size: 0.82rem;
}

.garage-list .yard-vehicle button {
    min-height: 1.8rem;
    font-size: 0.78rem;
}

.right-cockpit {
    grid-template-rows: minmax(21rem, 1fr) minmax(12rem, 0.6fr);
    gap: 0.45rem;
    align-content: stretch;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.upgrade-cockpit,
.worker-cockpit {
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(153, 173, 167, 0.28);
    background: linear-gradient(180deg, rgba(9, 23, 27, 0.96), rgba(2, 12, 15, 0.94));
}

.upgrade-tree {
    position: relative;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    max-height: none;
    height: calc(100% - 5rem);
    padding: 0.65rem;
    background:
        linear-gradient(90deg, transparent 32%, rgba(203, 230, 45, 0.18) 32% 34%, transparent 34% 65%, rgba(203, 230, 45, 0.18) 65% 67%, transparent 67%),
        linear-gradient(180deg, transparent 24%, rgba(203, 230, 45, 0.16) 24% 26%, transparent 26% 50%, rgba(203, 230, 45, 0.16) 50% 52%, transparent 52% 76%, rgba(203, 230, 45, 0.16) 76% 78%, transparent 78%);
}

.upgrade-tree button {
    place-items: center;
    min-height: 5.4rem;
    padding: 0.45rem;
    border-radius: 0.35rem;
    border-left-width: 1px;
    text-align: center;
}

.upgrade-tree button b {
    display: grid;
    place-items: center;
    width: 2.2rem;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.35rem;
    color: #eef7c6;
    font-size: 1.3rem;
}

.upgrade-tree button strong {
    font-size: 0.78rem;
}

.upgrade-tree button span {
    display: none;
}

.worker-cockpit .worker-panel {
    max-height: calc(100% - 2.6rem);
    padding: 0.55rem;
}

.worker-row,
.applicant-row {
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    align-items: center;
}

.worker-row::before,
.applicant-row::before {
    content: "";
    width: 2.55rem;
    aspect-ratio: 1;
    border-radius: 0.28rem;
    background:
        linear-gradient(135deg, rgba(255, 211, 54, 0.28), rgba(129, 225, 54, 0.14)),
        url("https://commons.wikimedia.org/wiki/Special:Redirect/file/Car_icon_transparent.png?width=100");
    background-size: cover;
}

.worker-row select,
.worker-row button,
.applicant-row button {
    grid-column: 2 / -1;
    min-height: 1.9rem;
}

.cockpit-bottom {
    display: grid;
    grid-template-columns: 20rem minmax(24rem, 1fr) minmax(16rem, 0.75fr) minmax(22rem, 1.1fr);
    gap: 0.45rem;
    min-height: 0;
}

.bottom-card {
    overflow: hidden;
    padding: 0.65rem;
}

.bottom-card h2 {
    color: #ffd536;
    font-size: 1rem;
    text-transform: uppercase;
}

.event-list #eventPanel {
    margin-top: 0.4rem;
}

.event-list .event-photo {
    min-height: 3.4rem;
}

.story-card {
    background:
        linear-gradient(90deg, rgba(4, 12, 12, 0.92), rgba(24, 18, 12, 0.84)),
        url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Abandoned_cars_in_a_junkyard_with_exhaust_pipe_visible_in_the_foreground.jpg/640px-Abandoned_cars_in_a_junkyard_with_exhaust_pipe_visible_in_the_foreground.jpg");
    background-size: cover;
}

.story-card p {
    margin-top: 0.5rem;
    max-width: 42rem;
    color: rgba(255, 255, 255, 0.8);
}

.story-progress {
    margin-top: 0.7rem;
}

.objectives-card,
.recent-card {
    overflow: auto;
}

.offer-list {
    max-height: 5.6rem;
}

.yard-log {
    max-height: 6.7rem;
    margin-top: 0.35rem;
}

.cockpit-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 0.75rem;
    border-radius: 0.2rem;
}

.cockpit-footer strong {
    flex: 1;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

.asset-credit {
    display: none;
}

@media (max-width: 1180px) {
    .yard-command,
    .junkyard-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .event-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .junkyard-hero,
    .yard-command,
    .junkyard-layout {
        grid-template-columns: 1fr;
    }

    .junkyard-topbar {
        position: static;
        align-items: flex-start;
        flex-direction: column;
    }

    .yard-panel {
        min-height: auto;
    }

    .vehicle-list,
    .offer-list {
        max-height: none;
    }

    .workshop-actions,
    .yard-vehicle {
        grid-template-columns: 1fr;
    }

    .mobile-yard-pad {
        display: grid;
    }

    .market-gallery {
        grid-template-columns: repeat(3, 1fr);
    }

    .market-gallery img:first-child {
        grid-column: 1 / -1;
    }

    .asset-credit {
        padding-bottom: 4.5rem;
    }
}

.theme-lab {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(320px, 1.2fr);
    gap: 1rem;
}

.theme-lab-hero {
    grid-column: 1 / -1;
}

.theme-controls {
    display: grid;
    gap: 1rem;
    align-self: start;
}

.theme-preview {
    min-height: 28rem;
    display: grid;
    place-items: center;
}

.preview-card {
    width: min(28rem, 100%);
    padding: 1.2rem;
    border: 1px solid var(--accent);
    border-radius: 1rem;
    background: var(--card-bg);
    box-shadow: 0 0 44px var(--accent-glow);
}

.preview-card span {
    color: var(--accent);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.preview-card h2 {
    margin-top: 0.5rem;
    font-size: 2rem;
}

.preview-card p {
    margin-top: 0.6rem;
    color: var(--fg-muted);
}

.preview-card button {
    min-height: 2.7rem;
    margin-top: 1rem;
    padding: 0 1rem;
    border: 0;
    border-radius: 0.65rem;
    background: var(--accent);
    color: white;
    font-weight: 900;
}

@media (max-width: 820px) {
    .guestbook-layout,
    .theme-lab {
        grid-template-columns: 1fr;
    }
}

.lore-network h2 {
    font-size: 1.4rem;
}

.lore-network p {
    color: var(--fg-muted);
}

.lore-network-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.lore-network-links a {
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
    color: var(--fg);
    text-decoration: none;
    font-weight: 800;
}

.lore-toggle-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 21000;
    min-height: 2.7rem;
    padding: 0 0.95rem;
    border: 1px solid rgba(139, 92, 246, 0.55);
    border-radius: 999px;
    background: rgba(10, 10, 12, 0.88);
    color: white;
    cursor: pointer;
    font-weight: 900;
    backdrop-filter: blur(12px);
}

.lore-toggle-button.off {
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.68);
}

body.lore-disabled [data-lore-feature] {
    display: none !important;
}

body.has-lore-toggle .fortune-cookie {
    bottom: 74px;
}


/* ==========================================
   Shared Unlock HUD
   ========================================== */

.unlock-hud {
    position: fixed;
    right: 1rem;
    top: 8.25rem;
    z-index: 20000;
    color: white;
}

.unlock-hud-toggle {
    min-height: 2.6rem;
    padding: 0 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    color: white;
    cursor: pointer;
    backdrop-filter: blur(12px);
}

.unlock-panel {
    position: absolute;
    right: 0;
    top: 3.2rem;
    width: min(32rem, calc(100vw - 2rem));
    max-height: min(32rem, calc(100vh - 7rem));
    overflow: auto;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.9rem;
    background: rgba(10, 10, 12, 0.92);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(14px);
}

.unlock-panel-grid {
    display: grid;
    gap: 1rem;
}

.unlock-panel h3 {
    margin-bottom: 0.5rem;
    color: #fff;
}

.unlock-panel p {
    display: grid;
    gap: 0.15rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.unlock-panel strong {
    color: #ffdc62;
}

.unlock-panel span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.86rem;
}

.unlock-toast {
    position: fixed;
    left: 50%;
    top: 5rem;
    z-index: 20001;
    max-width: min(28rem, calc(100vw - 2rem));
    padding: 0.8rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    background: #ff4fd8;
    color: white;
    font-weight: 800;
    transform: translateX(-50%);
    animation: unlockToast 2.8s ease forwards;
}

@keyframes unlockToast {
    0% { opacity: 0; transform: translate(-50%, -1rem) scale(0.94); }
    15%, 82% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -0.5rem) scale(0.96); }
}

.site-creature {
    position: fixed;
    left: calc(100vw - 8rem);
    top: calc(100vh - 8rem);
    z-index: 19999;
    width: 4.8rem;
    height: 4.8rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 46% 54% 50% 50%;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.22), transparent 18%),
        radial-gradient(circle at 50% 50%, #161022, #030106 70%);
    cursor: pointer;
    filter: drop-shadow(0 0 18px rgba(139, 92, 246, 0.82));
    animation: creatureBreathe 1.7s ease-in-out infinite;
}

.creature-eye {
    position: absolute;
    left: 50%;
    top: 34%;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: #ff4fd8;
    transform: translateX(-50%);
    box-shadow: 0 0 18px rgba(255, 79, 216, 0.95);
}

.creature-mouth {
    position: absolute;
    left: 50%;
    top: 62%;
    width: 1.8rem;
    height: 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.64);
    transform: translateX(-50%);
}

@keyframes creatureBreathe {
    0%, 100% { scale: 1; border-radius: 46% 54% 50% 50%; }
    50% { scale: 1.08; border-radius: 54% 46% 44% 56%; }
}


/* ==========================================
   Links
   ========================================== */

.accent-link {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.accent-link:hover {
    color: var(--accent-hover);
}


/* ==========================================
   Project Cards
   ========================================== */

.project-link {
    display: block;
    margin-top: 1.25rem;
    text-decoration: none;
}

.project-card {
    background: var(--button-bg);
    border: 1px solid var(--button-border);
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition: all 0.2s ease;
}

.project-card:hover {
    border-color: var(--accent);
}

.project-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.project-title-group {
    display: flex;
    align-items: center;
}

.project-title {
    font-weight: 600;
    color: var(--fg);
}

.project-tag {
    display: inline-block;
    margin-left: 0.75rem;
    padding: 0.125rem 0.5rem;
    background: rgba(128, 128, 128, 0.2);
    border-radius: 9999px;
    font-size: 0.75rem;
    color: var(--fg-muted);
}

.project-arrow {
    color: var(--fg-muted);
    font-size: 1.25rem;
}

.project-description {
    margin-top: 0.5rem;
    color: var(--fg-muted);
    font-size: 0.9375rem;
}

.project-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.75rem;
    color: var(--fg-faint);
    font-size: 0.875rem;
}

.stat-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}


/* ==========================================
   Language Bar (for projects)
   ========================================== */

.language-bar-container {
    margin-top: 1rem;
}

.language-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--card-border);
}

.language-segment {
    height: 100%;
}

.language-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--fg-muted);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.legend-item::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Language colors */
.legend-item.typescript::before { background: #3178c6; }
.legend-item.javascript::before { background: #f1e05a; }
.legend-item.css::before { background: #563d7c; }
.legend-item.html::before { background: #e34c26; }
.legend-item.python::before { background: #3572a5; }


/* ==========================================
   Tables (Setup Section)
   ========================================== */

.setup-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.25rem;
}

.setup-table .table-header {
    background: var(--accent);
    color: white;
    padding: 0.75rem 1rem;
    text-align: center;
    font-weight: 600;
    border-radius: 0.5rem 0.5rem 0 0;
    transition: background-color 0.3s ease;
}

.setup-table tbody tr {
    border-bottom: 1px solid var(--card-border);
    transition: border-color 0.3s ease;
}

.setup-table tbody tr:nth-child(even) {
    background: var(--table-row-alt);
    transition: background-color 0.3s ease;
}

.setup-table tbody td {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 400;
    color: var(--fg-muted);
    transition: color 0.3s ease;
}

.setup-table tbody td:first-child {
    color: var(--fg);
    font-weight: 500;
}

.setup-table tbody td:last-child {
    color: var(--fg);
}


/* ==========================================
   Tabs (Skills Section)
   ========================================== */

.tabs-container {
    margin-top: 2rem;
}

.tabs-header {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid var(--card-border);
}

.tab-button {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fg-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-button:hover {
    color: var(--fg);
}

.tab-button.active {
    background: var(--fg);
    color: var(--bg);
    border-radius: 0.5rem 0.5rem 0 0;
}

.tab-content {
    border-radius: 0 0 0.5rem 0.5rem;
    padding: 1rem;
}

.tab-content.hidden {
    display: none;
}


/* ==========================================
   Skills Table
   ========================================== */

.skills-table {
    width: 100%;
    margin-top: 1rem;
    border-collapse: collapse;
}

.skills-table tr {
    border-bottom: 1px solid var(--card-border);
}

.skills-table tr:nth-child(even) {
    background: var(--table-row-alt);
}

.skills-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 400;
}

.skills-table td:first-child {
    color: var(--fg);
}

.skills-table td:last-child {
    color: var(--fg-muted);
    border-left: 1px solid var(--card-border);
}


/* ==========================================
   Footer
   ========================================== */

.site-footer {
    max-width: 56rem;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    border-top: 1px solid var(--card-border);
    transition: border-color 0.3s ease;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.footer-link {
    color: var(--accent);
    text-decoration: none;
}

.footer-link:hover {
    text-decoration: underline;
}

.footer-credit {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 0.8125rem;
    color: var(--fg-faint);
}


/* ==========================================
   Sound & RGB Toggle Buttons
   ========================================== */

.sound-toggle,
.rgb-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--button-bg);
    border: 1px solid var(--button-border);
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    color: var(--fg);
    transition: all 0.2s ease;
}

.sound-toggle:hover,
.rgb-toggle:hover {
    border-color: var(--accent);
    background: var(--card-bg);
}

.rgb-toggle.active {
    animation: rgb-button 2s linear infinite;
}

@keyframes rgb-button {
    0% { border-color: #ff0000; color: #ff0000; }
    16% { border-color: #ff8800; color: #ff8800; }
    33% { border-color: #ffff00; color: #ffff00; }
    50% { border-color: #00ff00; color: #00ff00; }
    66% { border-color: #0088ff; color: #0088ff; }
    83% { border-color: #8800ff; color: #8800ff; }
    100% { border-color: #ff0000; color: #ff0000; }
}


/* ==========================================
   RGB Mode (Rainbow accent colors)
   ========================================== */

[data-rgb="true"] {
    --accent: #ff0000;
    animation: rgb-accent 4s linear infinite;
}

@keyframes rgb-accent {
    0% { --accent: #ff0000; }
    16% { --accent: #ff8800; }
    33% { --accent: #ffff00; }
    50% { --accent: #00ff00; }
    66% { --accent: #0088ff; }
    83% { --accent: #8800ff; }
    100% { --accent: #ff0000; }
}

[data-rgb="true"] .logo-accent,
[data-rgb="true"] .accent-link,
[data-rgb="true"] .footer-link {
    animation: rgb-text 4s linear infinite;
}

@keyframes rgb-text {
    0% { color: #ff0000; }
    16% { color: #ff8800; }
    33% { color: #ffff00; }
    50% { color: #00ff00; }
    66% { color: #0088ff; }
    83% { color: #8800ff; }
    100% { color: #ff0000; }
}

[data-rgb="true"] .button-accent,
[data-rgb="true"] .table-header {
    animation: rgb-bg 4s linear infinite;
}

@keyframes rgb-bg {
    0% { background: #ff0000; }
    16% { background: #ff8800; }
    33% { background: #cccc00; }
    50% { background: #00cc00; }
    66% { background: #0088ff; }
    83% { background: #8800ff; }
    100% { background: #ff0000; }
}

[data-rgb="true"] .logo-image {
    animation: rgb-glow 4s linear infinite;
}

@keyframes rgb-glow {
    0% { filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.6)); }
    16% { filter: drop-shadow(0 0 8px rgba(255, 136, 0, 0.6)); }
    33% { filter: drop-shadow(0 0 8px rgba(255, 255, 0, 0.6)); }
    50% { filter: drop-shadow(0 0 8px rgba(0, 255, 0, 0.6)); }
    66% { filter: drop-shadow(0 0 8px rgba(0, 136, 255, 0.6)); }
    83% { filter: drop-shadow(0 0 8px rgba(136, 0, 255, 0.6)); }
    100% { filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.6)); }
}


/* ==========================================
   Floating Background Elements (Parallax)
   ========================================== */

.floating-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.floater {
    position: absolute;
    font-size: 1.5rem;
    opacity: 0.15;
    left: var(--x);
    top: var(--y);
    animation: float 6s ease-in-out infinite;
    animation-delay: var(--delay);
    transition: transform 0.1s ease-out;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(10deg);
    }
}

[data-theme="light"] .floater {
    opacity: 0.1;
}


/* ==========================================
   Click Counter
   ========================================== */

.click-counter {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    color: var(--fg-muted);
    z-index: 100;
    transition: all 0.3s ease;
    cursor: default;
}

.click-counter:hover {
    border-color: var(--accent);
    transform: scale(1.05);
}

.click-icon {
    margin-right: 0.25rem;
}

.click-achievement {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    margin-bottom: 0.5rem;
    animation: achievementPop 0.5s ease-out;
    box-shadow: 0 4px 12px rgba(155, 77, 202, 0.4);
}

.click-achievement::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--accent);
}

@keyframes achievementPop {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px) scale(0.8);
    }
    50% {
        transform: translateX(-50%) translateY(-5px) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}


/* ==========================================
   Snake Game Modal
   ========================================== */

.game-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.game-modal-content {
    background: var(--card-bg);
    border: 2px solid var(--accent);
    border-radius: 1rem;
    padding: 1.5rem;
    max-width: 90vw;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 1rem;
}

.game-header h3 {
    margin: 0;
    color: var(--fg);
    font-size: 1.25rem;
}

.game-score {
    color: var(--accent);
    font-weight: 600;
}

.game-close {
    background: none;
    border: none;
    color: var(--fg-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease;
}

.game-close:hover {
    color: var(--fg);
}

#snake-canvas {
    display: block;
    background: #111;
    border-radius: 0.5rem;
    max-width: 100%;
}

.game-instructions {
    margin-top: 1rem;
    color: var(--fg-muted);
    font-size: 0.875rem;
    text-align: center;
}


/* ==========================================
   Konami Code Hint
   ========================================== */

.konami-hint {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--accent);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    z-index: 100;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}


/* ==========================================
   Confetti (Konami Code Effect)
   ========================================== */

.confetti {
    position: fixed;
    pointer-events: none;
    z-index: 10001;
    font-size: 1.5rem;
    animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg);
    }
}


/* ==========================================
   Interests Grid
   ========================================== */

.interests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.interest-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 1rem;
    background: var(--button-bg);
    border: 1px solid var(--button-border);
    border-radius: 0.75rem;
    transition: all 0.2s ease;
}

.interest-item:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.interest-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.interest-name {
    font-weight: 500;
    color: var(--fg);
}

.music-note {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--fg-muted);
    font-style: italic;
    font-size: 0.9rem;
}


/* ==========================================
   Tech Stack
   ========================================== */

.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.tech-category h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.tech-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tech-badge {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: var(--button-bg);
    border: 1px solid var(--button-border);
    border-radius: 2rem;
    font-size: 0.875rem;
    color: var(--fg);
    transition: all 0.2s ease;
}

.tech-badge:hover {
    border-color: var(--accent);
    background: var(--card-bg);
}

.tech-badge.learning {
    border-style: dashed;
    color: var(--fg-muted);
}

.tech-badge.learning:hover {
    color: var(--fg);
}


/* ==========================================
   Stats Section
   ========================================== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem;
    background: var(--button-bg);
    border: 1px solid var(--button-border);
    border-radius: 0.75rem;
    text-align: center;
    transition: all 0.2s ease;
}

.stat-card:hover {
    border-color: var(--accent);
    transform: scale(1.02);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--fg-muted);
}


/* ==========================================
   Removed Garage Panel Styles
   ========================================== */

.chaos-card {
    position: relative;
    overflow: hidden;
}

.chaos-card::after {
    content: "";
    position: absolute;
    inset: auto -20% -45% 20%;
    height: 12rem;
    background:
        radial-gradient(circle, rgba(155, 77, 202, 0.18), transparent 62%),
        radial-gradient(circle at 80% 40%, rgba(0, 180, 255, 0.14), transparent 55%);
    pointer-events: none;
}

.chaos-heading {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.garage-light {
    width: 1rem;
    height: 1rem;
    margin-top: 0.25rem;
    border-radius: 999px;
    background: #40ff87;
    box-shadow: 0 0 18px rgba(64, 255, 135, 0.8);
    animation: garageBlink 2.4s ease-in-out infinite;
}

@keyframes garageBlink {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

.chaos-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.chaos-panel {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-height: 13rem;
    padding: 1rem;
    background: var(--button-bg);
    border: 1px solid var(--button-border);
    border-radius: 0.75rem;
}

.panel-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.quick-swatches {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.65rem;
    margin: 0.25rem 0 1rem;
}

.quick-swatches button {
    aspect-ratio: 1;
    min-height: 3rem;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.75rem;
    background: var(--swatch);
    cursor: pointer;
    box-shadow: 0 0 24px color-mix(in srgb, var(--swatch) 46%, transparent);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.quick-swatches button:hover {
    transform: translateY(-2px) scale(1.03);
    border-color: white;
}

.mood-buttons,
.panic-controls {
    display: grid;
    gap: 0.75rem;
}

.danger-button {
    border-color: rgba(255, 74, 74, 0.55);
    color: #ff8a8a;
}

.danger-button:hover {
    background: #b91c1c;
    border-color: #ff4a4a;
    color: white;
}

.danger-button.armed {
    animation: dangerPulse 0.7s ease-in-out infinite;
}

@keyframes dangerPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 74, 74, 0); }
    50% { box-shadow: 0 0 24px rgba(255, 74, 74, 0.75); }
}

.mood-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mood-button {
    min-height: 2.5rem;
    padding: 0.5rem;
    border: 1px solid var(--button-border);
    border-radius: 0.5rem;
    background: var(--card-bg);
    color: var(--fg);
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s ease;
}

.mood-button:hover,
.mood-button.active {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

.mini-readout {
    color: var(--fg-muted);
    font-size: 0.9rem;
}

[data-chaos-mood="turbo"] {
    --accent: #ff2d95;
    --accent-hover: #ff65b2;
    --accent-glow: rgba(255, 45, 149, 0.45);
}

[data-chaos-mood="midnight"] {
    --accent: #35d7ff;
    --accent-hover: #7ee7ff;
    --accent-glow: rgba(53, 215, 255, 0.38);
}

[data-chaos-mood="shop"] {
    --accent: #ffb000;
    --accent-hover: #ffc84d;
    --accent-glow: rgba(255, 176, 0, 0.38);
}

.meteor {
    position: fixed;
    top: -3rem;
    z-index: 10001;
    pointer-events: none;
    font-size: 1.5rem;
    animation: meteorDrop 1.2s linear forwards;
}

@keyframes meteorDrop {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    to {
        opacity: 0;
        transform: translate3d(var(--drift), 110vh, 0) rotate(540deg);
    }
}


/* ==========================================
   FAQ Section
   ========================================== */

.faq-list {
    margin-top: 1.5rem;
}

.faq-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--card-border);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    font-weight: 600;
    color: var(--fg);
    margin-bottom: 0.5rem;
}

.faq-question::before {
    content: "Q: ";
    color: var(--accent);
}

.faq-answer {
    color: var(--fg-muted);
    padding-left: 1.5rem;
    font-size: 0.9375rem;
}

.faq-answer::before {
    content: "A: ";
    color: var(--fg-faint);
}


/* ==========================================
   Fortune Cookie
   ========================================== */

.fortune-cookie {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    color: var(--fg-muted);
    z-index: 100;
    cursor: pointer;
    transition: all 0.3s ease;
    max-width: 250px;
}

.fortune-cookie:hover {
    border-color: var(--accent);
    transform: scale(1.05);
}

.fortune-icon {
    margin-right: 0.5rem;
}


/* ==========================================
   Matrix Rain
   ========================================== */

.matrix-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.3;
}


/* ==========================================
   Snow Effect
   ========================================== */

.snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
}

.snowflake {
    position: absolute;
    color: white;
    font-size: 1rem;
    animation: snowfall linear infinite;
    opacity: 0.8;
}

@keyframes snowfall {
    0% {
        transform: translateY(-10px) rotate(0deg);
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
    }
}


/* ==========================================
   DVD Screensaver
   ========================================== */

.dvd-screensaver {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dvd-logo {
    position: absolute;
    font-size: 2rem;
    font-weight: bold;
    padding: 1rem 2rem;
    border: 3px solid currentColor;
    border-radius: 0.5rem;
    transition: color 0.5s ease;
}


/* ==========================================
   Nyan Cat
   ========================================== */

.nyan-cat {
    position: fixed;
    top: 50%;
    left: -200px;
    font-size: 3rem;
    z-index: 10000;
    animation: nyanFly 4s linear forwards;
    white-space: nowrap;
}

.nyan-body {
    display: inline-block;
    animation: nyanBounce 0.2s ease-in-out infinite;
}

@keyframes nyanFly {
    0% { left: -200px; }
    100% { left: calc(100% + 200px); }
}

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


/* ==========================================
   Disco Mode
   ========================================== */

.disco-ball {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 4rem;
    z-index: 10000;
    animation: discoBall 1s ease-in-out infinite;
    filter: drop-shadow(0 0 20px white);
}

@keyframes discoBall {
    0%, 100% { transform: translateX(-50%) rotate(0deg); }
    50% { transform: translateX(-50%) rotate(180deg); }
}

[data-disco="true"] {
    animation: discoBackground 0.5s linear infinite;
}

[data-disco="true"] * {
    animation: discoElements 0.3s linear infinite;
}

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

@keyframes discoElements {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}


/* ==========================================
   Vaporwave Mode
   ========================================== */

[data-vaporwave="true"] {
    --bg: #1a0a2e;
    --fg: #ff71ce;
    --fg-muted: #01cdfe;
    --accent: #05ffa1;
    --card-bg: #2d1b4e;
    --card-border: #b967ff;
    background: linear-gradient(180deg, #1a0a2e 0%, #2d1b4e 50%, #1a0a2e 100%);
}

[data-vaporwave="true"] .logo-accent {
    background: linear-gradient(90deg, #ff71ce, #01cdfe, #05ffa1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-vaporwave="true"]::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 113, 206, 0.03) 2px,
            rgba(255, 113, 206, 0.03) 4px
        );
    pointer-events: none;
    z-index: 9998;
}


/* ==========================================
   Explosive Clicks
   ========================================== */

.click-explosion {
    position: fixed;
    pointer-events: none;
    z-index: 10001;
    font-size: 1.5rem;
    animation: explode 0.5s ease-out forwards;
}

@keyframes explode {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(2);
    }
}


/* ==========================================
   Spinning Logo
   ========================================== */

.logo-image.spinning {
    animation: logoSpin var(--spin-duration, 2s) linear infinite;
}

@keyframes logoSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* ==========================================
   Commands Hint
   ========================================== */

.commands-hint {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--card-bg);
    border: 2px solid var(--accent);
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    text-align: center;
    z-index: 10002;
    animation: fadeInOut 4s ease-in-out forwards;
    box-shadow: 0 0 30px var(--accent-glow);
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    85% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}


/* ==========================================
   Time-based Greeting Styles
   ========================================== */

.greeting-late-night {
    color: var(--accent);
    font-style: italic;
}


/* ==========================================
   Screen Shake
   ========================================== */

.screen-shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}


/* ==========================================
   Utility Classes
   ========================================== */

.hidden {
    display: none !important;
}


/* ==========================================
   Responsive Styles
   ========================================== */

@media (max-width: 768px) {
    .site-header {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 1rem;
    }

    .main-nav {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-link {
        padding: 0.45rem 0.65rem;
        font-size: 0.8125rem;
    }

    .page-wrapper {
        padding: 1rem;
    }

    .card {
        padding: 1.25rem;
    }

    .setup-table tbody td {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    .mood-buttons {
        grid-template-columns: 1fr;
    }
}
/* ==========================================
   Top Hint Marquee (Sticky)
   ========================================== */

.top-marquee {
    width: 100%;
    background: var(--card-bg);
    border-bottom: 1px solid var(--card-border);
    overflow: hidden;
    white-space: nowrap;
    
    /* Sticky Logic */
    position: sticky; 
    top: 4.5rem; /* Matches the height of your site-header */
    z-index: 49;  /* Just below the header's z-index of 50 */
    
    padding: 0.5rem 0;
    user-select: none;
    transition: background-color 0.3s ease;
}

.marquee-content {
    display: inline-block;
    padding-left: 100%;
    animation: marquee-scroll 40s linear infinite;
}

.marquee-content span {
    display: inline-block;
    padding: 0 4rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--fg-muted);
    letter-spacing: 0.5px;
}

/* Pause on hover to let users read specific hints */
.top-marquee:hover .marquee-content {
    animation-play-state: paused;
}

.marquee-content span:hover {
    color: var(--accent);
    cursor: help;
}

@keyframes marquee-scroll {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}


/* ==========================================
   Arcade Page
   ========================================== */

.arcade-page {
    max-width: 68rem;
}

.arcade-hero {
    position: relative;
    overflow: hidden;
    min-height: 22rem;
    display: grid;
    align-items: end;
    background:
        linear-gradient(135deg, rgba(155, 77, 202, 0.24), transparent 45%),
        radial-gradient(circle at 80% 20%, rgba(53, 215, 255, 0.2), transparent 34%),
        var(--card-bg);
}

.arcade-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(to bottom, black, transparent 82%);
    pointer-events: none;
}

.arcade-hero-content {
    position: relative;
    z-index: 1;
}

.arcade-hero h1 {
    font-size: clamp(2.4rem, 8vw, 5.25rem);
    line-height: 0.95;
    margin-bottom: 1rem;
}

.arcade-hero p {
    max-width: 44rem;
    color: var(--fg-muted);
    font-size: 1.1rem;
}

.arcade-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.arcade-actions .button {
    width: auto;
}

.arcade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.arcade-machine {
    min-height: 22rem;
}

.arcade-screen {
    min-height: 12rem;
    display: grid;
    place-items: center;
    margin: 1rem 0;
    padding: 1.25rem;
    background: #070707;
    border: 1px solid #2c2c2c;
    border-radius: 0.75rem;
    color: #cafff2;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    text-align: center;
    box-shadow: inset 0 0 30px rgba(5, 255, 161, 0.12);
}

.reaction-light {
    width: 7rem;
    height: 7rem;
    border-radius: 999px;
    background: #3a1b1b;
    border: 0.5rem solid #151515;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.7);
}

.reaction-light.ready {
    background: #18f27b;
    box-shadow: 0 0 28px rgba(24, 242, 123, 0.7), inset 0 0 18px rgba(255, 255, 255, 0.35);
}

.sticker-wall {
    align-content: start;
    grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
    gap: 0.5rem;
}

.sticker {
    display: grid;
    place-items: center;
    min-height: 3rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    font-size: 1.5rem;
}

.command-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.command-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--card-border);
}

.command-row code {
    color: var(--accent);
}

@media (max-width: 560px) {
    .arcade-actions .button {
        width: 100%;
    }

    .command-row {
        display: block;
    }
}


/* ==========================================
   Shared Lab Page Styles
   ========================================== */

.lab-page,
.studio-page {
    max-width: 72rem;
}

.lab-hero,
.studio-hero {
    min-height: 18rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 176, 0, 0.16), transparent 38%),
        radial-gradient(circle at 88% 22%, rgba(155, 77, 202, 0.28), transparent 32%),
        var(--card-bg);
}

.lab-hero h1,
.studio-hero h1 {
    font-size: clamp(2.7rem, 8vw, 5.6rem);
    line-height: 0.92;
}

.lab-hero p,
.studio-hero p {
    max-width: 44rem;
    margin-top: 1rem;
    color: var(--fg-muted);
    font-size: 1.12rem;
}

.scanner-beacon {
    flex: 0 0 12rem;
    width: 12rem;
    height: 12rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #101010;
    border: 1px solid rgba(255, 176, 0, 0.36);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8), 0 0 35px rgba(255, 176, 0, 0.16);
}

.scanner-beacon span {
    width: 6rem;
    height: 6rem;
    border-radius: 999px;
    background: #ffb000;
    box-shadow: 0 0 35px rgba(255, 176, 0, 0.72);
    animation: scannerPulse 1.8s ease-in-out infinite;
}

@keyframes scannerPulse {
    0%, 100% { transform: scale(0.74); opacity: 0.55; }
    50% { transform: scale(1); opacity: 1; }
}

.lab-layout,
.studio-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
    gap: 1.25rem;
    margin-top: 1.75rem;
}

.diagnostic-panel,
.scan-output,
.sticker-tools {
    margin-top: 0;
}

.symptom-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 1.25rem;
}

.symptom-chip,
.sticker-tool {
    min-height: 2.7rem;
    border: 1px solid var(--button-border);
    border-radius: 0.55rem;
    background: var(--button-bg);
    color: var(--fg);
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s ease;
}

.symptom-chip:hover,
.symptom-chip.active,
.sticker-tool:hover,
.sticker-tool.active {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

.lab-label {
    display: block;
    margin-top: 1.2rem;
    margin-bottom: 0.45rem;
    color: var(--fg-muted);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lab-input,
.range-input {
    width: 100%;
}

.lab-input {
    min-height: 2.8rem;
    padding: 0 0.8rem;
    border: 1px solid var(--button-border);
    border-radius: 0.55rem;
    background: var(--button-bg);
    color: var(--fg);
    font: inherit;
}

.lab-input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.scan-button {
    margin-top: 1rem;
}

.scan-screen {
    min-height: 19rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(5, 255, 161, 0.25);
    border-radius: 0.75rem;
    background:
        repeating-linear-gradient(0deg, rgba(5, 255, 161, 0.04), rgba(5, 255, 161, 0.04) 1px, transparent 1px, transparent 8px),
        #050706;
    color: #cafff2;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    box-shadow: inset 0 0 28px rgba(5, 255, 161, 0.1);
}

.scan-line {
    margin-bottom: 0.75rem;
}

.scan-line.good {
    color: #40ff87;
}

.scan-line.warning {
    color: #ffdc62;
}

.scan-line.muted {
    color: rgba(202, 255, 242, 0.55);
}

.scan-meter {
    display: grid;
    gap: 0.45rem;
    margin-top: 1rem;
    color: var(--fg-muted);
    font-size: 0.9rem;
}

.meter-track {
    height: 0.75rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--button-bg);
}

.meter-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffb000, #40ff87);
    transition: width 0.5s ease;
}

.scan-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}

.receipt-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.receipt-card {
    padding: 1rem;
    border: 1px solid var(--button-border);
    border-radius: 0.65rem;
    background: var(--button-bg);
}

.receipt-card div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--fg);
}

.receipt-card p {
    margin-top: 0.45rem;
    color: var(--fg-muted);
}

.receipt-card small {
    display: block;
    margin-top: 0.5rem;
    color: var(--fg-faint);
}


/* ==========================================
   Sticker Studio Page
   ========================================== */

.studio-hero {
    display: block;
    background:
        radial-gradient(circle at 20% 30%, rgba(34, 211, 238, 0.22), transparent 32%),
        radial-gradient(circle at 88% 18%, rgba(255, 45, 149, 0.18), transparent 28%),
        var(--card-bg);
}

.sticker-tools {
    align-self: start;
}

.sticker-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    margin-top: 1rem;
}

.sticker-tool {
    font-size: 1.35rem;
}

.range-input {
    accent-color: var(--accent);
}

.studio-actions {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.sticker-canvas-wrap {
    min-height: 34rem;
    padding: 1rem;
    border: 1px solid var(--card-border);
    border-radius: 1rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent),
        var(--card-bg);
}

.sticker-canvas {
    position: relative;
    min-height: 32rem;
    overflow: hidden;
    border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--button-border));
    border-radius: 0.8rem;
    background:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(155, 77, 202, 0.12), transparent 56%),
        #090909;
    background-size: 30px 30px, 30px 30px, auto, auto;
    cursor: crosshair;
}

.canvas-hint {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.42);
    font-size: 1.2rem;
    pointer-events: none;
}

.placed-sticker {
    position: absolute;
    display: block;
    user-select: none;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35));
    animation: stickerPop 0.22s ease-out;
}

@keyframes stickerPop {
    from { opacity: 0; scale: 0.35; }
    to { opacity: 1; scale: 1; }
}

@media (max-width: 860px) {
    .lab-layout,
    .studio-layout {
        grid-template-columns: 1fr;
    }

    .scanner-beacon {
        display: none;
    }
}


/* ==========================================
   Chaos OS
   ========================================== */

.chaos-os-body {
    min-height: 100vh;
    overflow: hidden;
    background: #05020b;
    color: white;
    user-select: none;
}

.os-desktop {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 18%, rgba(255, 79, 216, 0.34), transparent 28%),
        radial-gradient(circle at 82% 22%, rgba(0, 255, 170, 0.22), transparent 32%),
        linear-gradient(135deg, #10051e, #031016 52%, #180515);
    font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.os-desktop[data-wallpaper="acid"] {
    background:
        radial-gradient(circle at 25% 20%, rgba(197, 255, 0, 0.38), transparent 28%),
        radial-gradient(circle at 80% 30%, rgba(0, 255, 200, 0.28), transparent 32%),
        linear-gradient(135deg, #061307, #161600 55%, #050505);
}

.os-desktop[data-wallpaper="sunset"] {
    background:
        radial-gradient(circle at 25% 15%, rgba(255, 190, 80, 0.36), transparent 30%),
        radial-gradient(circle at 80% 26%, rgba(255, 55, 120, 0.3), transparent 34%),
        linear-gradient(135deg, #250715, #241108 54%, #08050c);
}

.os-desktop[data-wallpaper="terminal"] {
    background:
        repeating-linear-gradient(0deg, rgba(0, 255, 120, 0.05), rgba(0, 255, 120, 0.05) 1px, transparent 1px, transparent 9px),
        linear-gradient(135deg, #020604, #05140d);
}

.os-desktop[data-wallpaper="ocean"] {
    background:
        radial-gradient(circle at 20% 20%, rgba(0, 220, 255, 0.3), transparent 32%),
        radial-gradient(circle at 80% 36%, rgba(80, 90, 255, 0.3), transparent 34%),
        linear-gradient(135deg, #02111f, #05051d);
}

.os-wallpaper {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at 50% 40%, black, transparent 82%);
    pointer-events: none;
}

.os-welcome {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
    background: rgba(5, 2, 11, 0.82);
    backdrop-filter: blur(12px);
}

.os-welcome h1 {
    font-size: clamp(3rem, 11vw, 8rem);
    line-height: 0.86;
    text-shadow: 0 0 35px rgba(255, 79, 216, 0.7);
}

.os-welcome p {
    max-width: 42rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.1rem;
}

.os-primary,
.os-home-link,
.start-button,
.task-button,
.paint-toolbar button,
.fake-files button,
.desktop-icon {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    font: inherit;
    transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.os-primary {
    padding: 0.9rem 1.4rem;
    background: #ff4fd8;
    border-color: #ff4fd8;
    font-weight: 800;
}

.os-home-link {
    padding: 0.55rem 0.9rem;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
}

.os-primary:hover,
.os-home-link:hover,
.start-button:hover,
.task-button:hover,
.paint-toolbar button:hover,
.fake-files button:hover,
.desktop-icon:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.18);
}

.desktop-icons {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 5;
    display: grid;
    gap: 0.75rem;
}

.desktop-icon {
    width: 5.4rem;
    min-height: 5rem;
    display: grid;
    place-items: center;
    gap: 0.2rem;
    padding: 0.65rem 0.45rem;
    background: rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(8px);
    font-size: 0.78rem;
}

.desktop-icon span {
    font-size: 1.7rem;
    line-height: 1;
}

.os-window {
    position: absolute;
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: min(42rem, 48vw);
    min-height: 18rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.9rem;
    background: rgba(12, 12, 18, 0.76);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(18px);
}

.terminal-window {
    width: min(40rem, 48vw);
}

.paint-window {
    width: min(46rem, 50vw);
}

.notes-window {
    width: min(29rem, 38vw);
}

.files-window {
    width: min(30rem, 36vw);
}

.os-window.minimized {
    display: none;
}

.os-window-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.5rem;
    padding: 0.55rem 0.7rem;
    background: rgba(255, 255, 255, 0.1);
    cursor: grab;
}

.os-window-bar:active {
    cursor: grabbing;
}

.os-window-bar span {
    font-weight: 800;
    font-size: 0.88rem;
}

.os-window-bar button {
    width: 1.7rem;
    height: 1.7rem;
    margin-left: 0.35rem;
    border: 0;
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.12);
    color: white;
    cursor: pointer;
}

.terminal-screen {
    flex: 1;
    min-height: 16rem;
    padding: 1rem;
    overflow: auto;
    background: rgba(0, 0, 0, 0.56);
    color: #b9ffd9;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 0.92rem;
}

.terminal-screen p {
    margin-bottom: 0.5rem;
}

.terminal-screen .command {
    color: #ffdc62;
}

.terminal-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem;
    background: rgba(0, 0, 0, 0.74);
    color: #40ff87;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.terminal-form input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: white;
    font: inherit;
}

.paint-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.28);
}

.paint-toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.9rem;
}

.paint-toolbar button {
    padding: 0.45rem 0.7rem;
}

.paint-toolbar button.active {
    background: linear-gradient(90deg, red, orange, yellow, lime, cyan, violet);
    color: #050505;
    font-weight: 800;
}

.paint-canvas {
    width: 100%;
    height: auto;
    display: block;
    background:
        linear-gradient(45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
        #f8f8ff;
    background-size: 28px 28px;
    cursor: crosshair;
    touch-action: none;
}

.os-notes {
    flex: 1;
    min-height: 18rem;
    padding: 1rem;
    border: 0;
    outline: 0;
    resize: none;
    background: #fff4a8;
    color: #2d2100;
    font: 700 1rem/1.5 'Nunito Sans', sans-serif;
}

.fake-files {
    display: grid;
    gap: 0.5rem;
    padding: 0.8rem;
}

.fake-files button {
    padding: 0.65rem 0.75rem;
    text-align: left;
}

.file-preview {
    min-height: 10rem;
    margin: 0.8rem;
    padding: 0.8rem;
    overflow: auto;
    border-radius: 0.6rem;
    background: rgba(0, 0, 0, 0.5);
    color: #d7f9ff;
    white-space: pre-wrap;
}

.os-taskbar {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.9rem;
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(16px);
}

.start-button,
.task-button {
    min-height: 2.3rem;
    padding: 0 0.9rem;
}

.start-button {
    background: #ff4fd8;
    border-color: #ff4fd8;
    font-weight: 900;
}

.os-clock {
    margin-left: auto;
    padding: 0 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.start-menu {
    position: absolute;
    left: 0.95rem;
    bottom: 4.6rem;
    z-index: 950;
    display: grid;
    gap: 0.55rem;
    min-width: 15rem;
    padding: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.9rem;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(16px);
}

.start-menu button,
.start-menu a {
    padding: 0.65rem 0.75rem;
    border: 0;
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
}

.fake-alert {
    position: absolute;
    z-index: 1200;
    padding: 0.75rem 1rem;
    border: 2px solid #050505;
    border-radius: 0.25rem;
    background: #fff;
    color: #050505;
    font-weight: 900;
    animation: alertPop 1.8s ease-in forwards;
}

@keyframes alertPop {
    0% { opacity: 0; transform: scale(0.5) rotate(-8deg); }
    15% { opacity: 1; transform: scale(1) rotate(3deg); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: scale(0.8) rotate(12deg); }
}

.panic-mode {
    animation: panicShake 0.16s linear infinite;
}

@keyframes panicShake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(4px, -2px); }
    50% { transform: translate(-3px, 3px); }
    75% { transform: translate(2px, 4px); }
}

@media (max-width: 760px) {
    .chaos-os-body {
        overflow: auto;
    }

    .os-desktop {
        min-height: 100svh;
        padding: 1rem 1rem 5rem;
        overflow: visible;
    }

    .desktop-icons {
        position: relative;
        top: auto;
        left: auto;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        margin-bottom: 1rem;
    }

    .desktop-icon {
        width: auto;
    }

    .os-window,
    .terminal-window,
    .paint-window,
    .notes-window,
    .files-window {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: 100%;
        margin-bottom: 1rem;
    }

    .task-button {
        display: none;
    }
}


/* ==========================================
   Playground Pages: Room, Lore, Games, Pet
   ========================================== */

.play-body {
    min-height: 100vh;
    overflow-x: hidden;
    background: #080812;
    color: white;
    font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.play-shell {
    width: min(76rem, calc(100vw - 2rem));
    margin: 0 auto;
    padding: 1rem 0 5rem;
}

.play-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
}

.play-nav a {
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    text-decoration: none;
}

.room-stage {
    position: relative;
    min-height: min(42rem, calc(100vh - 8rem));
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 1.2rem;
    background:
        linear-gradient(180deg, #21122f 0 58%, #130b12 58%),
        #130b12;
    box-shadow: 0 22px 80px rgba(0, 0, 0, 0.45);
}

.room-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 78% 18%, rgba(255, 210, 92, 0.22), transparent 20%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: auto, 80px 100%;
    pointer-events: none;
}

.room-stage.lights-out {
    filter: brightness(0.58) saturate(1.2);
}

.room-object {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    font-weight: 900;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.room-object:hover {
    border-color: #ffdc62;
    transform: translateY(-3px) rotate(-1deg);
}

.poster { left: 8%; top: 12%; width: 10rem; height: 13rem; background: linear-gradient(135deg, #8b5cf6, #ff4fd8); }
.monitor { left: 38%; top: 22%; width: 18rem; height: 10rem; background: #030712; color: #40ff87; }
.toolbox { left: 58%; top: 62%; width: 11rem; height: 5rem; background: #b91c1c; }
.drawer { left: 20%; top: 62%; width: 13rem; height: 7rem; background: #6b3f21; }
.lamp { right: 10%; top: 14%; width: 6rem; height: 14rem; background: #ffdc62; color: #241800; }
.rug { left: 38%; bottom: 6%; width: 22rem; height: 5rem; border-radius: 50%; background: #2563eb; }
.snack { right: 13%; bottom: 14%; width: 6rem; height: 4rem; background: #f97316; }

.smash-switch {
    position: absolute;
    left: 45%;
    bottom: 16%;
    z-index: 3;
    min-height: 3.2rem;
    padding: 0 1rem;
    border: 2px solid #fff;
    border-radius: 0.7rem;
    background: #dc2626;
    color: white;
    cursor: pointer;
    font-weight: 1000;
    letter-spacing: 0.04em;
    box-shadow: 0 0 24px rgba(220, 38, 38, 0.75);
    animation: smashPulse 0.8s ease-in-out infinite;
}

@keyframes smashPulse {
    0%, 100% { transform: translate(-50%, 0) scale(1); }
    50% { transform: translate(-50%, 0) scale(1.08); }
}

.room-stage.creature-smashed {
    animation: roomBonk 0.45s ease-in-out;
}

@keyframes roomBonk {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-1deg) translateX(-6px); }
    50% { transform: rotate(1deg) translateX(6px); }
    75% { transform: rotate(-0.5deg) translateX(-3px); }
}

.room-message {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    width: min(42rem, calc(100% - 2rem));
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.9rem;
    background: rgba(0, 0, 0, 0.68);
    transform: translateX(-50%);
    text-align: center;
    backdrop-filter: blur(10px);
}

@media (max-width: 720px) {
    .room-stage {
        min-height: 54rem;
    }

    .poster { left: 5%; top: 8%; width: 7rem; height: 9rem; }
    .monitor { left: 30%; top: 18%; width: 13rem; height: 8rem; }
    .lamp { right: 5%; top: 5%; width: 4.8rem; height: 10rem; }
    .drawer { left: 7%; top: 50%; width: 10rem; }
    .toolbox { right: 8%; top: 55%; width: 9rem; }
    .rug { left: 14%; bottom: 13%; width: 17rem; }
}

.lore-body {
    background:
        radial-gradient(circle at 50% 20%, rgba(139, 92, 246, 0.28), transparent 34%),
        #05030b;
}

.lore-door {
    min-height: 28rem;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.2rem;
    background:
        linear-gradient(90deg, transparent 49%, rgba(255, 255, 255, 0.12) 49% 51%, transparent 51%),
        linear-gradient(135deg, #12091f, #07030c);
    box-shadow: inset 0 0 90px rgba(139, 92, 246, 0.16), 0 24px 80px rgba(0, 0, 0, 0.42);
}

.lore-door h1 {
    font-size: clamp(3.5rem, 12vw, 8rem);
    line-height: 0.85;
    text-shadow: 0 0 28px rgba(139, 92, 246, 0.8);
}

.door-lock {
    display: flex;
    gap: 0.6rem;
    width: min(28rem, calc(100% - 2rem));
}

.door-lock input,
.door-lock button {
    min-height: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.65rem;
    font: inherit;
}

.door-lock input {
    flex: 1;
    padding: 0 0.9rem;
    background: rgba(0, 0, 0, 0.44);
    color: white;
}

.door-lock button {
    padding: 0 1rem;
    background: #8b5cf6;
    color: white;
    cursor: pointer;
    font-weight: 900;
}

.lore-logs {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.lore-logs article {
    padding: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.08);
}

.lore-logs.locked {
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
}

.containment-chamber {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 28%, rgba(255, 79, 216, 0.24), transparent 26%),
        rgba(255, 255, 255, 0.08) !important;
}

.containment-chamber::before {
    content: "";
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 5rem;
    height: 5rem;
    border-radius: 999px;
    background: #05030b;
    box-shadow: inset 0 0 20px rgba(255, 79, 216, 0.45), 0 0 20px rgba(255, 79, 216, 0.22);
}

.containment-chamber button {
    margin-top: 1rem;
    min-height: 3rem;
    padding: 0 1rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.65rem;
    background: #ff4fd8;
    color: white;
    cursor: pointer;
    font-weight: 900;
}

.containment-chamber button:disabled {
    opacity: 0.55;
    cursor: default;
}

.games-body {
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 176, 0, 0.24), transparent 28%),
        radial-gradient(circle at 85% 18%, rgba(255, 79, 216, 0.22), transparent 28%),
        #080812;
}

.games-hero {
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, 0.08);
    text-align: center;
}

.games-hero h1 {
    font-size: clamp(3rem, 10vw, 7rem);
    line-height: 0.9;
}

.mini-game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.mini-game-card {
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.08);
}

.target-arena {
    position: relative;
    min-height: 18rem;
    margin: 1rem 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.8rem;
    background: #050505;
}

#targetButton {
    position: absolute;
    width: 3.2rem;
    height: 3.2rem;
    border: 0;
    border-radius: 999px;
    background: #ff4fd8;
    color: white;
    cursor: pointer;
    font-size: 2rem;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 24px rgba(255, 79, 216, 0.72);
}

.memory-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    margin: 1rem 0;
}

.memory-grid button {
    min-height: 6rem;
    border: 0;
    border-radius: 0.8rem;
    cursor: pointer;
}

.memory-grid button:nth-child(1) { background: #ef4444; }
.memory-grid button:nth-child(2) { background: #22c55e; }
.memory-grid button:nth-child(3) { background: #3b82f6; }
.memory-grid button:nth-child(4) { background: #f59e0b; }

.memory-grid button.flash {
    filter: brightness(1.8);
    transform: scale(1.04);
}

.typing-word {
    display: grid;
    place-items: center;
    min-height: 6rem;
    margin: 1rem 0;
    border-radius: 0.8rem;
    background: #050505;
    color: #40ff87;
    font: 900 2rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.creature-lab-body {
    background:
        radial-gradient(circle at 20% 14%, rgba(64, 255, 135, 0.2), transparent 30%),
        radial-gradient(circle at 84% 16%, rgba(255, 79, 216, 0.24), transparent 34%),
        #05070b;
}

.creature-lab {
    display: grid;
    grid-template-columns: minmax(320px, 1.1fr) minmax(280px, 0.9fr);
    gap: 1rem;
}

.lab-title,
.specimen-tank,
.experiment-panel,
.research-log {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.34);
}

.lab-title {
    grid-column: 1 / -1;
    padding: 1.5rem;
}

.lab-title h1 {
    font-size: clamp(3rem, 10vw, 7rem);
    line-height: 0.86;
}

.lab-title p {
    max-width: 42rem;
    margin-top: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
}

.specimen-tank {
    position: relative;
    min-height: 34rem;
    overflow: hidden;
    background:
        repeating-linear-gradient(0deg, rgba(64, 255, 135, 0.05), rgba(64, 255, 135, 0.05) 1px, transparent 1px, transparent 14px),
        radial-gradient(circle at 50% 45%, rgba(64, 255, 135, 0.2), transparent 30%),
        #03100c;
}

.tank-glass {
    position: absolute;
    inset: 2rem;
    border: 2px solid rgba(151, 255, 211, 0.28);
    border-radius: 45% 55% 48% 52%;
    background: rgba(64, 255, 135, 0.06);
    box-shadow: inset 0 0 50px rgba(64, 255, 135, 0.12), 0 0 40px rgba(64, 255, 135, 0.1);
}

.lab-creature {
    position: absolute;
    left: 50%;
    top: 47%;
    width: 8rem;
    height: 8rem;
    border-radius: 46% 54% 50% 50%;
    background: #07030d;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 28px rgba(255, 79, 216, 0.82));
    animation: creatureBreathe 1.7s ease-in-out infinite;
}

.lab-creature span {
    position: absolute;
    left: 50%;
    top: 34%;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: #ff4fd8;
    transform: translateX(-50%);
    box-shadow: 0 0 22px rgba(255, 79, 216, 0.95);
}

.lab-creature.clone {
    width: 3.5rem;
    height: 3.5rem;
    animation: cloneFade 2.6s ease forwards;
}

@keyframes cloneFade {
    0% { opacity: 0; scale: 0.4; }
    20%, 75% { opacity: 1; scale: 1; }
    100% { opacity: 0; scale: 0.2; }
}

.specimen-tank.breached .lab-creature {
    opacity: 0.25;
    filter: grayscale(1) blur(2px);
}

.specimen-tank.flattened .lab-creature {
    height: 2rem;
    top: 68%;
    animation: none;
}

.specimen-tank.inverted {
    filter: hue-rotate(180deg) saturate(1.8);
}

.specimen-tank.critical {
    animation: panicShake 0.2s linear infinite;
}

.tank-status {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    padding: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.8rem;
    background: rgba(0, 0, 0, 0.58);
    text-align: center;
    color: #b9ffd9;
}

.experiment-panel,
.research-log {
    padding: 1rem;
}

.experiment-panel h2,
.research-log h2 {
    font-size: 1.8rem;
}

.experiment-panel p,
.research-log p {
    margin-top: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
}

.experiment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
    margin-top: 1rem;
}

.experiment-grid button {
    min-height: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    font-weight: 900;
}

.experiment-grid button:hover {
    background: #ff4fd8;
}

.lab-meters {
    display: grid;
    gap: 0.45rem;
    margin-top: 1rem;
}

.lab-meters label {
    display: flex;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.76);
}

.lab-meters div {
    height: 0.8rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.4);
}

.lab-meters div span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #40ff87, #ffdc62, #ff4fd8);
    transition: width 0.3s ease;
}

.research-log {
    grid-column: 1 / -1;
}

#researchLog {
    max-height: 15rem;
    overflow: auto;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0.8rem;
    background: rgba(0, 0, 0, 0.45);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

@media (max-width: 820px) {
    .creature-lab {
        grid-template-columns: 1fr;
    }
}