/* Font face declaration */ @font-face { font-family: 'PrStart'; src: url('assets/fonts/prstartk.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } * { margin: 0; padding: 0; box-sizing: border-box; } html { width: 100%; height: 100%; overflow: hidden; } /* DEBUG SWITCH - Toggle this class on to show/hide debug colors */ /* CURRENTLY: OFF */ /* body.debug-colors .messenger-section { background: rgba(255, 0, 0, 0.1) !important; } body.debug-colors .content-section { background: rgba(0, 255, 0, 0.1) !important; } body.debug-colors .content-container { background: rgba(0, 255, 0, 0.5) !important; } */ body { font-family: 'PrStart', monospace, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; /* Restored original gradient */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 250, 250, 0.9) 50%, rgba(245, 245, 245, 0.95) 100%); min-height: 100vh; width: 100vw; height: 100vh; overflow: hidden; } .main-container { position: fixed; top: 20px; left: 20px; right: 20px; bottom: 20px; border: 1px solid rgba(128, 128, 128, 0); border-radius: 12px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); /* Ensure container uses full available space */ width: calc(100vw - 40px); height: calc(100vh - 40px); /* Flexbox layout for three sections */ display: flex; flex-direction: column; /* Initial state - container is always visible */ opacity: 1; /* Border transition for realignment effects */ transition: border-color 0.3s ease; /* Animation - removed fadeInWithBorder to keep borders always visible */ } /* Three-Section Layout System */ /* * VERTICAL LAYOUT SECTIONS: * Part 1: Top section - provides vertical centering space for messenger * Part 2: Messenger section - contains messenger container * Part 3: Content section - contains content container, grows when messenger shrinks */ /* Part 1: Top Section */ .top-section { /* Initially takes up space to center messenger vertically */ height: calc(50vh - 150px); /* Half viewport minus half messenger height - ADJUSTABLE */ transition: height 0.8s cubic-bezier(0.4, 0.0, 0.2, 1); /* Position relative for HUD positioning */ position: relative; display: flex; align-items: flex-start; justify-content: flex-end; padding: 20px; } .main-container:has(.messenger-container.activated) .top-section { height: 60px; /* Enough space for HUD - ADJUSTABLE */ } /* Love Credits HUD */ .love-credits-hud { display: flex; align-items: center; gap: 8px; /* Initially hidden, will be shown when first credit is earned */ opacity: 0; transform: translateY(-10px); transition: opacity 0.5s ease, transform 0.5s ease; } .love-credits-hud.visible { opacity: 1; transform: translateY(0); } .love-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; } .love-icon-gif { width: 20px; height: 20px; /* Preserve crisp pixels if it's pixel art */ image-rendering: -moz-crisp-edges; image-rendering: -webkit-crisp-edges; image-rendering: pixelated; image-rendering: crisp-edges; } .love-counter { font-family: 'PrStart', monospace; font-size: 12px; font-weight: normal; color: #333; min-width: 20px; text-align: center; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Part 2: Messenger Section */ .messenger-section { height: 300px; /* Default messenger height - ADJUSTABLE */ display: flex; align-items: center; justify-content: center; /* background: rgba(255, 0, 0, 0.1); - moved to debug switch */ transition: height 0.8s cubic-bezier(0.4, 0.0, 0.2, 1); /* Add padding to create margins for child container */ padding: 0 20px; /* Horizontal margins - ADJUSTABLE */ } .main-container:has(.messenger-container.activated) .messenger-section { height: auto; /* Flexible height based on content */ min-height: 120px; /* Minimum height to ensure usability */ max-height: 300px; /* Increased max height for longer messages */ } /* Part 3: Content Section */ .content-section { flex: 1; /* Takes remaining space */ min-height: 0; /* Allows shrinking */ display: flex; align-items: center; justify-content: center; /* background: rgba(0, 255, 0, 0.1); - moved to debug switch */ /* REMOVED TRANSITION - parent changing size conflicts with child percentage transitions */ /* Add padding to create margins for child container */ padding: 20px; /* All-around margins - ADJUSTABLE */ } /* Messenger Container - NOW USES 100% WITH SECTION PADDING FOR MARGINS */ .messenger-container { /* Use full width - section padding provides margins */ width: 100% !important; /* Fill section width, padding provides margins */ max-width: 600px !important; /* Maximum width constraint - ADJUSTABLE */ height: 100%; /* Fill section height */ border: 1px solid rgba(128, 128, 128, 0); border-radius: 8px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); padding: 20px; box-sizing: border-box; /* Position relative for absolute positioning of children */ position: relative; display: flex; flex-direction: column; /* ENSURE transitions work with !important */ transition: all 0.8s cubic-bezier(0.4, 0.0, 0.2, 1) !important; } /* Content inside messenger container */ .messenger-container > * { transition: opacity 0.4s ease; } .messenger-container.activated { /* When activated, allow wider max-width */ width: 100% !important; /* Still fill section width */ max-width: 750px !important; /* 25% wider max constraint - ADJUSTABLE */ } /* Dynamic border switch system - Rotating gradient borders with smooth fading */ .main-container, .messenger-container, .content-container { background-color: rgb(128, 128, 128, 0.02); border-radius: 12px; /* Rounded corners */ position: relative; /* For pseudo-element positioning */ --border-width: 2px; --border-width-negative: -4px; /* Central border color definitions - adjust these to control effect intensity */ --border-primary: rgb(241, 241, 241); /* Main highlight color */ --border-secondary: rgb(236, 236, 236); /* Secondary color */ --border-subtle: rgb(255, 255, 255); /* Subtle transitions */ --border-accent: rgb(233, 233, 233); /* Accent edges */ } /* Pseudo-element handles the animated border - separate from content */ .main-container::before, .messenger-container::before, .content-container::before { content: ''; position: absolute; /* Inset by border width to prevent visual overflow */ top: var(--border-width); left: var(--border-width); right: var(--border-width); bottom: var(--border-width); border-radius: calc(12px - var(--border-width)); pointer-events: none; /* Don't interfere with content interaction */ opacity: 0; /* Start invisible */ transition: opacity 0.3s ease; z-index: -1; /* Behind content */ } /* Active state: fade in the border pseudo-element and start rotation */ .main-container.border-visible::before, .messenger-container.border-visible::before, .content-container.border-visible::before { opacity: 0.5; animation: border-gradient-rotate 1s linear infinite; } /* Fading out state: fade out the border pseudo-element while rotating */ .main-container.border-fading-out::before, .messenger-container.border-fading-out::before, .content-container.border-fading-out::before { opacity: 0; animation: border-gradient-rotate 1s linear infinite; } /* Fade animations removed - now handled by opacity transition on pseudo-element */ /* Main rotation animation - clockwise rotation of 4 colors around border */ @keyframes border-gradient-rotate { 0% { box-shadow: inset 0 var(--border-width) 0 0 var(--border-primary), /* Top edge - WHITE */ inset var(--border-width) 0 0 0 var(--border-accent), /* Right edge - PINK */ inset 0 var(--border-width-negative) 0 0 var(--border-secondary), /* Bottom edge - GREEN */ inset var(--border-width-negative) 0 0 0 var(--border-subtle); /* Left edge - BLUE */ } 25% { box-shadow: inset 0 var(--border-width) 0 0 var(--border-subtle), /* Top edge - BLUE (was left) */ inset var(--border-width) 0 0 0 var(--border-primary), /* Right edge - WHITE (was top) */ inset 0 var(--border-width-negative) 0 0 var(--border-accent), /* Bottom edge - PINK (was right) */ inset var(--border-width-negative) 0 0 0 var(--border-secondary); /* Left edge - GREEN (was bottom) */ } 50% { box-shadow: inset 0 var(--border-width) 0 0 var(--border-secondary), /* Top edge - GREEN (was left) */ inset var(--border-width) 0 0 0 var(--border-subtle), /* Right edge - BLUE (was top) */ inset 0 var(--border-width-negative) 0 0 var(--border-primary), /* Bottom edge - WHITE (was right) */ inset var(--border-width-negative) 0 0 0 var(--border-accent); /* Left edge - PINK (was bottom) */ } 75% { box-shadow: inset 0 var(--border-width) 0 0 var(--border-accent), /* Top edge - PINK (was left) */ inset var(--border-width) 0 0 0 var(--border-secondary), /* Right edge - GREEN (was top) */ inset 0 var(--border-width-negative) 0 0 var(--border-subtle), /* Bottom edge - BLUE (was right) */ inset var(--border-width-negative) 0 0 0 var(--border-primary); /* Left edge - WHITE (was bottom) */ } 100% { box-shadow: inset 0 var(--border-width) 0 0 var(--border-primary), /* Top edge - WHITE (back to start) */ inset var(--border-width) 0 0 0 var(--border-accent), /* Right edge - PINK (back to start) */ inset 0 var(--border-width-negative) 0 0 var(--border-secondary), /* Bottom edge - GREEN (back to start) */ inset var(--border-width-negative) 0 0 0 var(--border-subtle); /* Left edge - BLUE (back to start) */ } } /* Heart Avatar */ .heart-avatar { position: absolute; top: 20px; left: 20px; cursor: pointer; user-select: none; /* Container for layered images */ width: 72px; height: 72px; /* Initially hidden for entrance sequence */ opacity: 0; transform: scale(0.5); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Heart image styling - shared by all layers */ .heart-image { width: 72px; /* 50% bigger than 48px */ height: 72px; /* 50% bigger than 48px */ /* Preserve pixelated style */ image-rendering: -moz-crisp-edges; image-rendering: -webkit-crisp-edges; image-rendering: pixelated; image-rendering: crisp-edges; /* Smooth scaling for animation */ transition: transform 0.1s ease; /* Position for layering */ position: absolute; top: 0; left: 0; } /* Layer ordering */ .heart-base { z-index: 1; /* Base layer */ } .heart-eyes { z-index: 2; /* Eyes on top of base */ } .heart-mouth { z-index: 3; /* Mouth on top of everything */ } /* Heart avatar visible state */ .heart-avatar.heart-visible { opacity: 1; transform: scale(1); /* Subtle beating animation starts when visible */ animation: heartbeat 2s ease-in-out infinite; } @keyframes heartbeat { 0%, 50%, 100% { transform: scale(1); } 25% { transform: scale(1.1); } } /* Speech Bubble */ /* Speech system */ .speech-system { margin-left: 70px; /* Space for avatar */ margin-top: 10px; margin-bottom: 20px; position: relative; } /* Speech container - defines word wrapping limits, no visual styling */ .speech-container { position: relative; z-index: 10; /* Above the visual bubble */ max-width: 480px; /* Increased for better text flow */ padding: 12px 18px; /* Spacing for text, matches bubble padding */ background: rgba(144, 238, 144, 0.0); /* DEBUG: Light green background */ } /* Speech text - the actual visible text */ .speech-text { font-family: 'PrStart', monospace; font-size: 12px; line-height: 1.6; letter-spacing: 0px; color: #333333; word-break: normal; /* Normal word breaking */ white-space: normal; /* Normal space handling - collapses multiple spaces */ overflow-wrap: break-word; /* Break long words if needed */ hyphens: none; /* No automatic hyphenation */ word-spacing: normal; /* Normal spacing between words */ background: rgba(0, 128, 0, 0); /* DEBUG: Green background */ } /* Speech bubble container - matches speech-container size */ .speech-bubble-container { position: absolute; top: 0; left: 0; background: rgba(0, 0, 255, 0); /* DEBUG: Blue background */ z-index: 1; /* Behind the text container */ max-width: 480px; /* Same constraint as speech-container */ /* Size will be set by JavaScript to match speech-container */ transition: width 0.3s ease, height 0.3s ease; } /* Visual speech bubble - animates with percentages inside container */ .speech-bubble { /* Initial small size (percentages of container) */ width: 20%; height: 50%; opacity: 0; /* Visual styling only */ background: rgba(255, 255, 255, 1); border: 1px solid rgba(128, 128, 128, 0.1); border-radius: 18px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Animation properties - smooth percentage transitions */ transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), height 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease; } /* Speech bubble animation states */ .speech-bubble.speech-visible { opacity: 1; width: 100%; /* Fill container */ height: 100%; /* Fill container */ } .bubble-content { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(128, 128, 128, 0.2); border-radius: 18px; padding: 12px 18px; font-family: 'PrStart', monospace; font-size: 12px; line-height: 1.6; letter-spacing: 0px; color: #333; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); width: 100%; height: 100%; box-sizing: border-box; word-break: normal; /* Don't break words unless necessary */ white-space: normal; /* Normal space handling */ overflow-wrap: break-word; /* Only break very long words */ hyphens: none; /* No automatic hyphenation */ /* Speech bubble tail */ position: relative; /* Animation properties */ transform-origin: left center; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; } /* Animation states */ /* Old animation classes removed - now using simple scale on parent */ /* Typewriter cursor effect */ .bubble-content.typing::after { content: '|'; color: #e91e63; animation: blink 1s infinite; margin-left: 1px; } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } .bubble-content::before { content: ''; position: absolute; left: -8px; top: 12px; width: 0; height: 0; border: 8px solid transparent; border-right-color: rgba(255, 255, 255, 0.9); } /* Response Buttons */ .response-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: auto; /* Push to bottom */ margin-left: 70px; /* Align with speech bubble */ /* Initially hidden for entrance sequence */ opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; } /* Horizontal layout when messenger is activated (content mode) */ .messenger-container.activated .response-buttons { flex-direction: row; flex-wrap: wrap; gap: 12px; /* Increased gap for better spacing */ justify-content: center; /* Center align buttons */ margin-left: 0; /* Remove the 70px left margin in activated mode */ } /* Response buttons visible state */ .response-buttons.buttons-visible { opacity: 1; transform: translateY(0); } .response-btn { background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(128, 128, 128, 0.3); border-radius: 20px; padding: 10px 16px; font-family: 'PrStart', monospace; font-size: 11px; line-height: 1.4; color: #333; cursor: pointer; transition: all 0.2s ease; text-align: left; } .response-btn:hover { background: rgba(255, 255, 255, 0.95); border-color: #e91e63; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .response-btn:active { transform: translateY(0); } /* Compact button styling for horizontal layout */ .messenger-container.activated .response-btn { padding: 8px 16px; /* Slightly more padding for better proportion */ font-size: 10px; /* Smaller font */ border-radius: 16px; /* Smaller border radius */ flex: 1 1 auto; /* Allow buttons to grow and fill space */ white-space: nowrap; /* Keep text on one line */ text-align: center; /* Center text within buttons */ min-width: 120px; /* Minimum width for consistency */ } .sticky-btn { background: rgba(233, 30, 99, 0.05); border-color: rgba(233, 30, 99, 0.3); font-family: 'PrStart', monospace; font-size: 10px; } /* Debug Test Button - Hidden by default */ .test-button { position: absolute; bottom: 10px; right: 10px; padding: 8px 12px; background: rgba(128, 128, 128, 0.1); border: 1px solid rgba(128, 128, 128, 0.3); border-radius: 4px; color: #666; cursor: pointer; font-size: 12px; transition: all 0.2s ease; } .test-button:hover { background: rgba(128, 128, 128, 0.15); } .debug-only { opacity: 0.5; } /* Content Container - NOW USES 100% WITH SECTION PADDING FOR MARGINS */ .content-container { /* Start small with fixed dimensions */ width: 200px !important; /* Small start width - ADJUSTABLE */ height: 100px !important; /* Small start height - ADJUSTABLE */ /* Base styling - removed transparent border, inherits from general rule */ /* border: inherited from .content-container rule above */ border-radius: 8px; /* background: rgba(0, 255, 0, 0.5); - moved to debug switch */ padding: 20px; box-sizing: border-box; /* ENSURE transitions work */ transition: all 0.8s cubic-bezier(0.4, 0.0, 0.2, 1) !important; } /* When expanded, use full section space - padding provides margins */ .content-container.content-expanded { width: 100% !important; /* Fill section width, padding provides margins */ height: 100% !important; /* Fill section height, padding provides margins */ } /* Content placeholder styling */ .content-placeholder { font-family: 'PrStart', monospace; font-size: 12px; line-height: 1.6; opacity: 0; transition: opacity 0.6s ease 0.2s; /* Delayed fade in */ } .main-container:has(.messenger-container.activated) .content-container .content-placeholder { opacity: 1; }