/* ================================================
   RESET & CUSTOM PROPERTIES
   ================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: #000000;
    --text: #00ff41;
    --accent: #00ff41;
    --accent2: #33ff66;
    --card-bg: rgba(0, 255, 65, 0.03);
    --card-border: rgba(0, 255, 65, 0.2);
    --card-hover: rgba(0, 255, 65, 0.08);
    --avatar-border: #00ff41;
    --font-heading: 'Share Tech Mono', monospace;
    --font-body: 'Share Tech Mono', monospace;
    --glow: 0 0 20px rgba(0, 255, 65, 0.3);
    --tr: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --bass: 0;
    --mid: 0;
    --treble: 0;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    transition: background var(--tr), color var(--tr);
}

a { color: inherit; text-decoration: none; }

/* ================================================
   CANVAS & OVERLAYS
   ================================================ */
#fx-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}

#bg-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s, background 0.3s;
}

#scanlines {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.08) 2px,
        rgba(0, 0, 0, 0.08) 4px
    );
    transition: opacity 0.5s;
}

#flash-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 100;
    background: white;
    opacity: 0;
    will-change: opacity;
}

#audio-viz {
    position: fixed;
    bottom: 0; left: 0;
    width: 100%; height: 3px;
    pointer-events: none;
    z-index: 999;
    background: transparent;
    transition: box-shadow 0.1s;
}

/* ================================================
   MAIN CONTENT
   ================================================ */
#content {
    position: relative;
    z-index: 10;
    max-width: 960px;
    margin: 0 auto;
    padding: 2vh 24px 100px;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

/* ================================================
   HERO
   ================================================ */
#hero {
    text-align: center;
    margin-bottom: 1.5vh;
    flex-shrink: 0;
    transition: transform 0.15s ease-out;
    position: relative;
}

.avatar-wrap {
    position: relative;
    width: min(110px, 14vh);
    height: min(110px, 14vh);
    margin: 0 auto 1.5vh;
    transition: transform 0.1s ease-out;
}

.avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--avatar-border);
    box-shadow: var(--glow);
    position: absolute;
    top: 0; left: 0;
    transition: border-color var(--tr), opacity 0.5s, box-shadow 0.1s ease-out, filter 0.5s;
    will-change: transform, box-shadow;
}

#avatar-real { opacity: 0; }
#avatar-cartoon { opacity: 1; }

#name-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 2vw, 20px);
    margin-bottom: 0.5vh;
}

.cat-ascii {
    display: none;
    font-family: monospace;
    font-size: clamp(9px, 1.8vw, 15px);
    line-height: 1.3;
    white-space: pre;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    position: absolute;
    top: 0;
}

.cat-ascii-left {
    left: 0;
}

.cat-ascii-right {
    right: 0;
    transform: scaleX(-1);
}

.theme-minimal .cat-ascii {
    display: block;
    opacity: 0.75;
    color: #d4a017;
    text-shadow: 0 0 6px rgba(212, 160, 23, 0.5);
}

#site-name {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    letter-spacing: 0.05em;
    margin-bottom: 0;
    transition: font-family 0.3s, color var(--tr), text-shadow 0.1s ease-out;
    line-height: 1.2;
}

#site-tagline {
    font-size: clamp(0.75rem, 1.5vw, 0.9rem);
    opacity: 0.6;
    letter-spacing: 0.2em;
    text-transform: none;
    font-family: var(--font-body);
    transition: font-family 0.3s;
}

/* ================================================
   SOCIAL LINKS
   ================================================ */
#social-links {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 1vh;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--accent);
    opacity: 0.5;
    transition: opacity 0.2s, transform 0.2s, color var(--tr);
}

.social-link:hover {
    opacity: 1;
    transform: scale(1.18);
}

.social-link svg {
    width: 18px;
    height: 18px;
}

/* ================================================
   PROJECTS
   ================================================ */
#projects {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(0.85rem, 2.5vw, 1.1rem);
    margin-bottom: 1.2vh;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    opacity: 0.7;
    flex-shrink: 0;
    transition: font-family 0.3s, color var(--tr);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: min(10px, 1.2vh);
    flex: 1;
    min-height: 0;
}

.project-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 1vh 14px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    transition:
        background var(--tr),
        border-color var(--tr),
        color var(--tr),
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    will-change: transform, opacity;
}

.project-card:hover {
    background: var(--card-hover);
    transform: translateY(-3px) scale(1.01);
    box-shadow: var(--glow);
}

.card-name {
    font-family: var(--font-heading);
    font-size: clamp(0.88rem, 1.5vw, 1.08rem);
    font-weight: 700;
    transition: font-family 0.3s;
}

.card-url {
    font-size: clamp(0.7rem, 1.1vw, 0.82rem);
    opacity: 0.4;
    font-family: var(--font-body);
    transition: font-family 0.3s;
}

.card-badge {
    display: inline-block;
    margin-top: 2px;
    padding: 2px 6px;
    font-size: 0.80rem;
    border: 1px solid var(--accent);
    border-radius: 3px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    width: fit-content;
    transition: border-color var(--tr), color var(--tr);
}

/* ================================================
   MUTE BUTTON
   ================================================ */
/* Reset browser popover defaults so our styles win */
#mute-btn:popover-open {
    inset: auto;
    bottom: 28px;
    right: 28px;
    width: auto;
    height: 44px;
    margin: 0;
    overflow: visible;
}

#mute-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 2147483647;
    height: 44px;
    padding: 0 20px;
    border-radius: 22px;
    border: 2px solid var(--accent);
    background: rgba(0, 0, 0, 0.6);
    color: var(--accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        border-color var(--tr),
        color var(--tr),
        background 0.2s,
        border-radius 0.3s,
        padding 0.3s,
        height 0.3s;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: mute-breathe 2.5s ease-in-out infinite;
}

#mute-btn.started {
    width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 50%;
}

#mute-btn::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    border: 1.5px solid var(--accent);
    animation: mute-ring 2.5s ease-in-out infinite;
    pointer-events: none;
}

#mute-btn:hover {
    background: rgba(0, 0, 0, 0.85);
    animation: none;
    transform: scale(1.12);
}

#mute-btn:hover::after {
    animation: none;
    opacity: 0;
}

#start-label {
    font-family: 'Orbitron', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
}

#mute-btn svg { width: 22px; height: 22px; }
#icon-muted { display: none; }
#icon-unmuted { display: none; }
#start-sound-icon { width: 16px; height: 16px; margin-left: 7px; opacity: 0.85; }

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

@keyframes mute-ring {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.35); opacity: 0; }
}

/* ================================================
   THEME: MATRIX  (0:00 - 0:26)
   ================================================ */
.theme-matrix {
    --bg: #000000;
    --text: #00ff41;
    --accent: #00ff41;
    --card-bg: rgba(0, 255, 65, 0.03);
    --card-border: rgba(0, 255, 65, 0.15);
    --card-hover: rgba(0, 255, 65, 0.08);
    --avatar-border: #00ff41;
    --font-heading: 'Share Tech Mono', monospace;
    --font-body: 'Share Tech Mono', monospace;
    --glow: 0 0 20px rgba(0, 255, 65, 0.3);
}

.theme-matrix .avatar {
    filter: saturate(0) brightness(0.7) sepia(1) hue-rotate(70deg) saturate(4);
}
.theme-matrix #avatar-real { opacity: 0; }
.theme-matrix #avatar-cartoon { opacity: 1; }

.theme-matrix .section-title::before { content: '[ '; opacity: 0.4; }
.theme-matrix .section-title::after { content: ' ]'; opacity: 0.4; }
.theme-matrix .card-name::before { content: '> '; opacity: 0.35; }

.theme-matrix .project-card {
    background: rgba(0, 8, 0, 0.82);
    border-color: rgba(0, 255, 65, 0.35);
    box-shadow: 0 0 12px rgba(0, 255, 65, 0.08), inset 0 0 20px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-shadow: 0 0 6px rgba(0, 255, 65, 0.25);
}

.theme-matrix .avatar-wrap {
    animation: matrix-avatar-pulse 2s ease-in-out infinite;
}

@keyframes matrix-avatar-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(0, 255, 65, 0.2); border-radius: 50%; }
    50% { box-shadow: 0 0 35px rgba(0, 255, 65, 0.5); border-radius: 50%; }
}

/* ================================================
   THEME: CYBERPUNK  (0:26 - 0:37)
   ================================================ */
.theme-cyberpunk {
    --bg: #0a0a2e;
    --text: #e0e0ff;
    --accent: #ff00ff;
    --accent2: #00f0ff;
    --card-bg: rgba(255, 0, 255, 0.05);
    --card-border: rgba(0, 240, 255, 0.25);
    --card-hover: rgba(255, 0, 255, 0.1);
    --avatar-border: #ff00ff;
    --font-heading: 'Orbitron', sans-serif;
    --font-body: 'Inter', sans-serif;
    --glow: 0 0 25px rgba(255, 0, 255, 0.4), 0 0 50px rgba(0, 240, 255, 0.15);
}

.theme-cyberpunk #avatar-real { opacity: 0; }
.theme-cyberpunk #avatar-cartoon { opacity: 1; }
.theme-cyberpunk .avatar { filter: none; }

.theme-cyberpunk #site-name {
    background: linear-gradient(90deg, #00f0ff, #ff00ff, #00f0ff);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease infinite;
}

.theme-cyberpunk .project-card {
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    border-color: rgba(255, 0, 255, 0.3);
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.08), inset 0 0 12px rgba(255, 0, 255, 0.03);
    border-radius: 0;
}

.theme-cyberpunk .project-card:hover {
    border-color: #00f0ff;
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.25), inset 0 0 20px rgba(255, 0, 255, 0.06);
}

.theme-cyberpunk .card-name {
    border-bottom: 1px solid rgba(0, 240, 255, 0.2);
    padding-bottom: 4px;
}

.theme-cyberpunk .card-badge {
    border-color: #00f0ff;
    color: #00f0ff;
}

.theme-cyberpunk .avatar-wrap::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(#ff00ff, #00f0ff, #ff00ff);
    z-index: -1;
    animation: cyber-avatar-spin 3s linear infinite;
    opacity: 0.6;
}

@keyframes cyber-avatar-spin {
    to { transform: rotate(360deg); }
}

/* ================================================
   THEME: RETRO TERMINAL  (0:37 - 0:59)
   ================================================ */
.theme-retro {
    --bg: #0c0a00;
    --text: #ffb000;
    --accent: #ffb000;
    --card-bg: rgba(255, 176, 0, 0.04);
    --card-border: rgba(255, 176, 0, 0.18);
    --card-hover: rgba(255, 176, 0, 0.08);
    --avatar-border: #ffb000;
    --font-heading: 'VT323', monospace;
    --font-body: 'Share Tech Mono', monospace;
    --glow: 0 0 15px rgba(255, 176, 0, 0.25);
}

.theme-retro #scanlines { opacity: 1; }
.theme-retro::after {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0.85) 100%);
    pointer-events: none;
    z-index: 3;
}
.theme-retro #avatar-real { opacity: 0; }
.theme-retro #avatar-cartoon { opacity: 1; }
.theme-retro .avatar { filter: saturate(0) sepia(1) brightness(0.7) contrast(1.3); }

.theme-retro #site-name::after {
    content: '_';
    animation: blink-cursor 1s step-end infinite;
    animation-delay: 0s;
    color: #ffb000;
    -webkit-text-fill-color: #ffb000;
}

.theme-retro .project-card {
    border-radius: 0;
    border-style: dashed;
}

.theme-retro .card-name::before {
    content: 'C:\\> ';
    opacity: 0.4;
    font-size: 0.8em;
}

.theme-retro .section-title::before { content: '═══ '; opacity: 0.35; }
.theme-retro .section-title::after { content: ' ═══'; opacity: 0.35; }

.theme-retro #content {
    text-shadow: 0 0 8px rgba(255, 176, 0, 0.4);
    border-radius: 20px;
    box-shadow: inset 0 0 60px rgba(255, 176, 0, 0.04), inset 0 0 120px rgba(0, 0, 0, 0.3);
}

.theme-retro .project-card .card-name::after {
    content: '_';
    animation: blink-cursor 1s step-end infinite;
    animation-delay: 0s;
    opacity: 0.3;
}

/* ================================================
   THEME: JAPANESE  (0:59 - 1:12)
   ================================================ */
.theme-japanese {
    --bg: #faf3e8;
    --text: #2d1b00;
    --accent: #c41e3a;
    --card-bg: rgba(196, 30, 58, 0.03);
    --card-border: rgba(196, 30, 58, 0.12);
    --card-hover: rgba(196, 30, 58, 0.06);
    --avatar-border: #c41e3a;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    --glow: 0 0 20px rgba(196, 30, 58, 0.15);
}

.theme-japanese #avatar-real { opacity: 1; }
.theme-japanese #avatar-cartoon { opacity: 0; }
.theme-japanese .avatar { filter: none; }

.theme-japanese .project-card {
    border-radius: 2px;
    border-left: 4px solid var(--accent);
    border-top: none;
    border-right: none;
    border-bottom: none;
}

.theme-japanese .section-title::before { content: '『 '; }
.theme-japanese .section-title::after { content: ' 』'; }

.theme-japanese #mute-btn {
    background: rgba(250, 243, 232, 0.8);
}

.theme-japanese #site-tagline {
    font-style: italic;
}

.theme-japanese::before {
    content: '和';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40vw;
    opacity: 0.018;
    color: #c41e3a;
    pointer-events: none;
    z-index: 0;
    font-family: serif;
}


/* ================================================
   THEME: VAPORWAVE  (1:12 - 1:27)
   ================================================ */
.theme-vaporwave {
    --text: #ff71ce;
    --accent: #01cdfe;
    --card-bg: rgba(255, 113, 206, 0.06);
    --card-border: rgba(1, 205, 254, 0.2);
    --card-hover: rgba(1, 205, 254, 0.12);
    --avatar-border: #01cdfe;
    --font-heading: 'Orbitron', sans-serif;
    --font-body: 'Inter', sans-serif;
    --glow: 0 0 25px rgba(255, 113, 206, 0.35), 0 0 50px rgba(1, 205, 254, 0.15);
    background: linear-gradient(180deg, #0b0033 0%, #1a0044 50%, #2d0066 100%) !important;
}

.theme-vaporwave #avatar-real { opacity: 0; }
.theme-vaporwave #avatar-cartoon { opacity: 1; }
.theme-vaporwave .avatar { filter: hue-rotate(20deg) saturate(1.5); }

.theme-vaporwave #site-name {
    background: linear-gradient(90deg, #ff71ce, #01cdfe, #b967ff, #ff71ce);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 4s ease infinite;
}

.theme-vaporwave .project-card {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(11, 0, 51, 0.4);
    border-color: rgba(1, 205, 254, 0.2);
}

.theme-vaporwave .project-card:hover {
    border-color: rgba(255, 113, 206, 0.5);
    background: rgba(26, 0, 68, 0.6);
}

.theme-vaporwave .card-name {
    background: linear-gradient(90deg, #ff71ce, #01cdfe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.theme-vaporwave .section-title {
    letter-spacing: 0.3em;
    font-style: italic;
}

.theme-vaporwave #site-tagline {
    font-style: italic;
}

/* ================================================
   THEME: MINIMAL  (1:27 - 1:33)
   ================================================ */
.theme-minimal {
    --bg: #faf8f0;
    --text: #2a2210;
    --accent: #d4a017;
    --card-bg: rgba(255, 255, 255, 0.85);
    --card-border: rgba(212, 160, 23, 0.15);
    --card-hover: rgba(212, 160, 23, 0.08);
    --avatar-border: #d4a017;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    --glow: 0 0 12px rgba(212, 160, 23, 0.15);
    background-image: radial-gradient(circle, rgba(212, 160, 23, 0.08) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
}

.theme-minimal #avatar-real { opacity: 1; }
.theme-minimal #avatar-cartoon { opacity: 0; }
.theme-minimal .avatar { filter: none; }

.theme-minimal .project-card {
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.theme-minimal .project-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.theme-minimal .card-name {
    position: relative;
    display: inline;
}

.theme-minimal .card-name::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #111;
    transition: width 0.3s ease;
}

.theme-minimal .project-card:hover .card-name::after {
    width: 100%;
}

.theme-minimal #mute-btn {
    background: rgba(250, 248, 240, 0.9);
    border-color: #d4a017;
    color: #8b6914;
}

.theme-minimal .card-badge {
    border-color: #d4a017;
    color: #8b6914;
}

.theme-minimal .section-title {
    font-weight: 400;
    letter-spacing: 0.25em;
    font-style: italic;
}

.theme-minimal .card-name::after {
    background: #d4a017;
}

.theme-minimal #content {
    padding-top: 3vh;
}

/* ================================================
   THEME: GLITCH  (1:33 - 1:47)
   ================================================ */
.theme-glitch {
    --bg: #0d0d0d;
    --text: #ffffff;
    --accent: #ff0040;
    --card-bg: rgba(255, 255, 255, 0.02);
    --card-border: rgba(255, 0, 64, 0.2);
    --card-hover: rgba(255, 0, 64, 0.08);
    --avatar-border: #ff0040;
    --font-heading: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    --glow: 0 0 20px rgba(255, 0, 64, 0.25);
}

.theme-glitch #avatar-real { opacity: 1; }
.theme-glitch #avatar-cartoon { opacity: 0; }
.theme-glitch .avatar {
    filter: none;
    animation: rgb-split 0.15s steps(2) infinite;
}

.theme-glitch #site-name {
    animation: glitch-text 4s infinite;
    position: relative;
}

.theme-glitch #site-name::before,
.theme-glitch #site-name::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
}

.theme-glitch #site-name::before {
    color: #00ffff;
    animation: glitch-before 3s infinite;
    clip-path: inset(0 0 60% 0);
    -webkit-text-fill-color: #00ffff;
}

.theme-glitch #site-name::after {
    color: #ff0040;
    animation: glitch-after 3s infinite;
    clip-path: inset(60% 0 0 0);
    -webkit-text-fill-color: #ff0040;
}

.theme-glitch .project-card {
    border-radius: 0;
    animation: glitch-card-jitter 8s infinite;
    position: relative;
    overflow: hidden;
}

.theme-glitch .project-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(255, 0, 64, 0.02) 3px,
        rgba(255, 0, 64, 0.02) 6px
    );
    pointer-events: none;
}

.theme-glitch .section-title {
    letter-spacing: 0.3em;
    mix-blend-mode: difference;
}

@keyframes glitch-card-jitter {
    0%, 95%, 100% { transform: none; }
    96% { transform: translateX(-2px); }
    97% { transform: translateX(3px) skewX(-0.5deg); }
    98% { transform: translateX(-1px); }
    99% { transform: none; }
}

/* ================================================
   THEME: PATRIOTIC  (1:47 - 2:07)
   ================================================ */
.theme-patriotic {
    --bg: #0a1628;
    --text: #ffffff;
    --accent: #bf0a30;
    --card-bg: rgba(255, 255, 255, 0.04);
    --card-border: rgba(191, 10, 48, 0.3);
    --card-hover: rgba(191, 10, 48, 0.12);
    --avatar-border: #bf0a30;
    --font-heading: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    --glow: 0 0 20px rgba(191, 10, 48, 0.25);
}

.theme-patriotic #avatar-real { opacity: 1; }
.theme-patriotic #avatar-cartoon { opacity: 0; }
.theme-patriotic .avatar { filter: none; }

.theme-patriotic .project-card {
    border-left: 3px solid #bf0a30;
    border-right: 3px solid #002868;
}

.theme-patriotic #site-name {
    letter-spacing: 0.12em;
    font-weight: 700;
    text-transform: uppercase;
}

.theme-patriotic .card-name {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.theme-patriotic .section-title::before { content: '★ '; color: #ffd700; }
.theme-patriotic .section-title::after { content: ' ★'; color: #ffd700; }

.theme-patriotic .card-badge {
    border-color: #ffd700;
    color: #ffd700;
}


/* ================================================
   THEME: FINALE  (2:07 - End)
   ================================================ */
.theme-finale {
    --bg: #050505;
    --text: #ffffff;
    --accent: #ffd700;
    --card-bg: rgba(255, 215, 0, 0.04);
    --card-border: rgba(255, 215, 0, 0.15);
    --card-hover: rgba(255, 215, 0, 0.1);
    --avatar-border: #ffd700;
    --font-heading: 'Orbitron', sans-serif;
    --font-body: 'Inter', sans-serif;
    --glow: 0 0 30px rgba(255, 215, 0, 0.25), 0 0 60px rgba(255, 0, 255, 0.1);
}

.theme-finale #avatar-real { opacity: 0; }
.theme-finale #avatar-cartoon { opacity: 1; }
.theme-finale .avatar {
    filter: none;
    animation: avatar-rainbow-glow 3s ease infinite, finale-avatar-rotate 20s linear infinite;
}

.theme-finale #site-name {
    background: linear-gradient(90deg, #ffd700, #ff6b6b, #c084fc, #00f0ff, #ffd700);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 4s ease infinite;
    text-shadow: none;
}

.theme-finale .project-card {
    animation: finale-border-rainbow 3s ease infinite;
    border-width: 2px;
}

.theme-finale .card-name {
    background: linear-gradient(90deg, #ffd700, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.theme-finale .section-title {
    background: linear-gradient(90deg, #ffd700, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 1;
}

@keyframes finale-avatar-rotate {
    to { transform: rotate(360deg); }
}

@keyframes finale-border-rainbow {
    0%, 100% { border-color: rgba(255, 215, 0, 0.35); box-shadow: 0 0 15px rgba(255, 215, 0, 0.12), inset 0 0 8px rgba(255, 215, 0, 0.04); }
    25% { border-color: rgba(255, 107, 107, 0.4); box-shadow: 0 0 18px rgba(255, 107, 107, 0.15), inset 0 0 8px rgba(255, 107, 107, 0.05); }
    50% { border-color: rgba(192, 132, 252, 0.4); box-shadow: 0 0 18px rgba(192, 132, 252, 0.15), inset 0 0 8px rgba(192, 132, 252, 0.05); }
    75% { border-color: rgba(0, 240, 255, 0.4); box-shadow: 0 0 18px rgba(0, 240, 255, 0.15), inset 0 0 8px rgba(0, 240, 255, 0.05); }
}

.theme-finale #content {
    text-shadow: 0 0 16px rgba(255, 215, 0, 0.2);
    animation: finale-text-pulse 2s ease-in-out infinite;
}

@keyframes finale-text-pulse {
    0%, 100% { text-shadow: 0 0 16px rgba(255, 215, 0, 0.2); }
    50% { text-shadow: 0 0 24px rgba(255, 215, 0, 0.35), 0 0 48px rgba(192, 132, 252, 0.1); }
}

/* ================================================
   ANIMATIONS
   ================================================ */
@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

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

@keyframes rgb-split {
    0%, 100% { filter: none; }
    25% { filter: drop-shadow(3px 0 #ff0000) drop-shadow(-3px 0 #00ff00); }
    50% { filter: drop-shadow(-2px 0 #0000ff) drop-shadow(2px 0 #ff0000); }
    75% { filter: drop-shadow(1px 0 #00ff00) drop-shadow(-1px 0 #0000ff); }
}

@keyframes glitch-text {
    0%, 87%, 100% { transform: none; opacity: 1; }
    88% { transform: skewX(-8deg) translateX(10px); }
    89% { transform: skewX(5deg) translateX(-8px); opacity: 0.85; }
    90% { transform: skewX(-3deg) translateX(4px); }
    91% { transform: none; opacity: 1; }
}

@keyframes glitch-before {
    0%, 85%, 100% { transform: none; }
    86% { transform: translateX(-4px); }
    87% { transform: translateX(2px); }
    88% { transform: translateX(-2px); }
    89% { transform: none; }
}

@keyframes glitch-after {
    0%, 90%, 100% { transform: none; }
    91% { transform: translateX(4px); }
    92% { transform: translateX(-3px); }
    93% { transform: translateX(2px); }
    94% { transform: none; }
}

@keyframes avatar-rainbow-glow {
    0%, 100% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.7), 0 0 60px rgba(255, 215, 0, 0.3); }
    33% { box-shadow: 0 0 30px rgba(255, 107, 107, 0.7), 0 0 60px rgba(255, 0, 255, 0.3); }
    66% { box-shadow: 0 0 30px rgba(0, 240, 255, 0.7), 0 0 60px rgba(192, 132, 252, 0.3); }
}

@keyframes pulse-hero {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 768px) {
    .projects-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(7, 1fr); }
    #content { padding: 1.5vh 16px 160px; }
}

@media (max-width: 480px) {
    .projects-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(7, 1fr); }
    .avatar-wrap { width: min(80px, 11vh); height: min(80px, 11vh); }
    #content { padding: 1vh 12px 150px; }
    #mute-btn svg { width: 16px; height: 16px; }
    #start-label { font-size: 9px; }
    #start-sound-icon { width: 13px; height: 13px; margin-left: 5px; }
    .cat-ascii { font-size: 7px !important; }
}

@media (max-width: 340px) {
    .cat-ascii { display: none !important; }
}

/* ── SCENE SELECTOR ── */
#scene-selector {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.scene-btn {
    position: relative;
    font-family: monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 5px 9px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    background: transparent;
    color: rgba(255, 255, 255, 0.35);
    transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.15s;
    white-space: nowrap;
    user-select: none;
}
.scene-btn:hover {
    color: rgba(255, 255, 255, 0.85);
    transform: translateY(-2px);
}
.scene-btn.active {
    color: #fff;
    border-color: currentColor;
    transform: translateY(-2px);
}

/* per-theme accent colors on the active button */
.theme-matrix     .scene-btn[data-scene="matrix"].active    { color: #00ff41; background: rgba(0,255,65,0.1);  box-shadow: 0 0 8px rgba(0,255,65,0.4); }
.theme-cyberpunk  .scene-btn[data-scene="cyberpunk"].active { color: #ff00ff; background: rgba(255,0,255,0.1); box-shadow: 0 0 8px rgba(255,0,255,0.4); }
.theme-retro      .scene-btn[data-scene="retro"].active     { color: #ffb000; background: rgba(255,176,0,0.1); box-shadow: 0 0 8px rgba(255,176,0,0.4); }
.theme-japanese   .scene-btn[data-scene="japanese"].active  { color: #c41e3a; background: rgba(196,30,58,0.1); box-shadow: 0 0 8px rgba(196,30,58,0.4); }
.theme-vaporwave  .scene-btn[data-scene="vaporwave"].active { color: #ff71ce; background: rgba(255,113,206,0.1); box-shadow: 0 0 8px rgba(255,113,206,0.4); }
.theme-minimal    .scene-btn[data-scene="minimal"].active   { color: #d4a017; background: rgba(212,160,23,0.1); box-shadow: 0 0 8px rgba(212,160,23,0.4); }
.theme-glitch     .scene-btn[data-scene="glitch"].active    { color: #ff0040; background: rgba(255,0,64,0.1);  box-shadow: 0 0 8px rgba(255,0,64,0.4); }
.theme-patriotic  .scene-btn[data-scene="patriotic"].active { color: #bf0a30; background: rgba(191,10,48,0.1); box-shadow: 0 0 8px rgba(191,10,48,0.4); }
.theme-finale     .scene-btn[data-scene="finale"].active    { color: #ffd700; background: rgba(255,215,0,0.1); box-shadow: 0 0 8px rgba(255,215,0,0.5); }

/* hover previews per theme */
.theme-matrix     .scene-btn[data-scene="matrix"]:hover    { color: #00ff41; }
.theme-cyberpunk  .scene-btn[data-scene="cyberpunk"]:hover { color: #ff00ff; }
.theme-retro      .scene-btn[data-scene="retro"]:hover     { color: #ffb000; }
.theme-japanese   .scene-btn[data-scene="japanese"]:hover  { color: #c41e3a; }
.theme-vaporwave  .scene-btn[data-scene="vaporwave"]:hover { color: #ff71ce; }
.theme-minimal    .scene-btn[data-scene="minimal"]:hover   { color: #d4a017; }
.theme-glitch     .scene-btn[data-scene="glitch"]:hover    { color: #ff0040; }
.theme-patriotic  .scene-btn[data-scene="patriotic"]:hover { color: #bf0a30; }
.theme-finale     .scene-btn[data-scene="finale"]:hover    { color: #ffd700; }

/* subtle dot indicator on active */
.scene-btn.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.8;
}

/* mobile: tighter spacing */
@media (max-width: 540px) {
    .scene-btn { font-size: 9px; padding: 4px 7px; }
    #scene-selector { gap: 2px; padding: 5px 8px; }
}

/* ── SCENE SELECTOR + START BUTTON MOBILE LAYOUT ── */
@media (max-width: 768px) {
    /* Scene selector takes bottom bar; mute btn sits just above it on the right */
    #mute-btn,
    #mute-btn:popover-open {
        bottom: calc(44px + 10px);
        right: 12px;
    }
    #mute-btn.started,
    #mute-btn.started:popover-open {
        bottom: calc(44px + 10px);
    }
}

@media (max-width: 480px) {
    #mute-btn,
    #mute-btn:popover-open {
        bottom: calc(40px + 8px);
        right: 12px;
        height: 36px;
        padding: 0 14px;
    }
    #mute-btn.started,
    #mute-btn.started:popover-open {
        bottom: calc(40px + 8px);
        width: 40px;
        height: 40px;
        padding: 0;
    }
}