@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Quicksand:wght@400;700&family=Courier+Prime:wght@400;700&display=swap');

:root {
    --bg-pink: #ffe6ea;
    --bg-blue: #e0f7fa;
    --text-dark: #4a4a4a;
    --ribbon-gold: #ffd700;
    --heart-red: #ff6b6b;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-pink);
    color: var(--text-dark);
    font-family: 'Quicksand', sans-serif;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    transition: background-color 2s ease;
    touch-action: none;
    /* Critical for custom drag handling */
    user-select: none;
    -webkit-user-drag: none;
}

canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* UI Overlay */
#ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
    /* Let clicks pass unless on interactive elements */
}

/* Code Balloon (Synced with Physics) */
.code-balloon {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    font-family: 'Courier Prime', monospace;
    font-size: 14px;
    color: #333;
    pointer-events: auto;
    /* Clickable */
    width: 240px;
    border: 2px solid #e0e0e0;
}

.code-balloon .comments {
    color: #888;
    font-style: italic;
}

.code-balloon .keyword {
    color: #d73a49;
    font-weight: bold;
}

.code-balloon .string {
    color: #032f62;
}

.code-balloon .date {
    color: #6f42c1;
    font-weight: bold;
    display: block;
    margin-top: 10px;
}

/* Media Viewer Overlay */
#media-viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 100;
    display: block;
    /* changed from flex to allow scroll */
    overflow-y: auto;
    /* Allow scrolling */
    /* Removed justify-content: center; */
    /* Removed align-items: center; */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 40px 0;
    /* Add top/bottom padding for scroll space */
    box-sizing: border-box;
    text-align: center;
    /* Center inline-block content */
}

#media-viewer.active {
    opacity: 1;
    pointer-events: auto;
}

#media-content {
    max-width: 95%;
    /* Use more width */
    height: auto;
    /* Allow full height */
    /* Removed max-height: 90% */
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    display: inline-block;
    /* Works with text-align center */
    margin: auto;
    vertical-align: middle;
}

/* Video Balloon (Square, Bigger) */
.video-balloon {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 15px;
    /* Slight rounded corners, but mostly square */
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border: 5px solid white;
    background: black;
    pointer-events: auto;
    z-index: 15;
    display: none;
    /* Disable Dragging */
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

.video-balloon video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    /* Let clicks hit the parent div */
    -webkit-user-drag: none;
}

/* Fade Out Animation */
.fade-out {
    opacity: 0;
    transition: opacity 1.5s ease-out;
    pointer-events: none;
}

/* Ensure body black background during transition if needed */
body.transitioning {
    background-color: black !important;
}

/* Image Balloon (Circle, Bigger) */
.image-balloon {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    /* Circle */
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border: 5px solid white;
    background: #f0f0f0;
    pointer-events: auto;
    z-index: 15;
    display: none;
}

.image-balloon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}