The Trial Protocol

THE TRIAL: Butterfly Effect Profiles / ========================================= / / GLOBAL RESET & GRITTY SLASHER AESTHETIC / / Dead by Daylight x Until Dawn Theme / / ========================================= / :root { --bg-darkest: 050505; / Pitch black basement / --bg-card: 0d0d0e; / Deep textured charcoal / --accent-blood: 8b0000; / Raw dried blood crimson / --accent-glow: ff2a2a; / High-tension status effect glow / --text-survival: cfd2d6; / Ash gray / Muted silver / --text-dark: 666666; / Fog/Shadow text / --font-ui: 'Courier New', Courier, monospace; / Hardwired survival UI / } { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--bg-darkest); / Vignette overlay for that claustrophobic camera lens effect / background-image: radial-gradient(circle, rgba(0,0,0,0) 40%, rgba(0,0,0,0.9) 100%), url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="3" height="3" viewBox="0 0 3 3"%3E%3Ccircle cx="1.5" cy="1.5" r="0.5" fill="%231a1a1a" fill-opacity="0.6"/%3E%3C/svg%3E'); / VCR scanline dust / color: var(--text-survival); font-family: var(--font-ui); padding: 40px 20px; display: flex; flex-direction: column; align-items: center; } header { text-align: center; margin-bottom: 50px; border-bottom: 1px dashed var(--accent-blood); padding-bottom: 20px; width: 100%; max-width: 1200px; position: relative; } header h1 { font-size: 2.2rem; color: var(--text-survival); letter-spacing: 0.6rem; text-transform: uppercase; text-shadow: 0 0 8px rgba(139, 0, 0, 0.7); } header p { font-size: 0.8rem; color: var(--accent-blood); letter-spacing: 0.2rem; margin-top: 8px; text-transform: uppercase; font-weight: bold; } / Status Banner simulating Until Dawn notifications / .status-banner { position: absolute; top: -20px; right: 0; font-size: 0.7rem; background: rgba(139, 0, 0, 0.2); border: 1px solid var(--accent-blood); padding: 4px 10px; color: var(--accent-glow); text-transform: uppercase; animation: pulse 2s infinite alternate; } @keyframes pulse { 0% { opacity: 0.6; } 100% { opacity: 1; } } / ========================================= / / THE CHARACTER CARD GRID (4 PANELS) / / ========================================= / .trial-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1200px; width: 100%; } @media (max-width: 1024px) { .trial-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .trial-grid { grid-template-columns: 1fr; } } / ========================================= / / PORTRAIT MATRIX DESIGN / / ========================================= / .survivor-panel { background-color: var(--bg-card); border: 1px solid 1c1c1f; border-radius: 0px; / Sharp corners for clinical/slasher layout / padding: 16px; display: flex; flex-direction: column; position: relative; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } / Hover effect mimicking a targeted trial status selection / .survivor-panel:hover { border-color: var(--accent-blood); box-shadow: 0 0 15px rgba(139, 0, 0, 0.3); transform: translateY(-2px); } .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 0.75rem; color: var(--text-dark); border-bottom: 1px solid 1a1a1c; padding-bottom: 6px; } .char-title { font-size: 1.1rem; color: var(--text-survival); letter-spacing: 0.1rem; margin: 12px 0; text-transform: uppercase; font-weight: normal; } / Standard 2:3 Aspect Ratio for Tipsy/Tensor portraits / .portrait-slot { width: 100%; aspect-ratio: 2 / 3; background-color: 000; border: 1px solid 222; position: relative; overflow: hidden; } .portrait-slot img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(20%) contrast(110%); } / Default Placeholder UI when images are empty / .ui-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: 252528; font-size: 0.8rem; letter-spacing: 0.1rem; border: 1px dashed 222; background: linear-gradient(180deg, 070708 0%, 0d0d0f 100%); } .ui-placeholder::before { content: '[ SLOT ]'; margin-bottom: 10px; font-size: 1.2rem; color: 1f1f22; } / ========================================= / / REN'S EXCLUSIVE 4-STAGE IMAGE CAROUSEL / / ========================================= / .killer-panel { border-color: rgba(139, 0, 0, 0.3); } .killer-panel .char-title { color: var(--accent-glow); text-shadow: 0 0 5px rgba(255, 42, 42, 0.3); } .fader-box { position: relative; } .fader-box .ui-placeholder { display: none; / Auto-kill placeholder once images populate / } .stage-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease-in-out; z-index: 1; } .stage-image.active-stage { opacity: 1; z-index: 2; } / ========================================= / / INTERACTIVE LOG MENU DROPDOWNS (UNTIL DAWN) / / ========================================= / .log-matrix { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 10px; } details { width: 100%; background: 09090a; border: 1px solid 151517; transition: border-color 0.2s ease; } summary { list-style: none; padding: 10px 12px; cursor: pointer; font-size: 0.75rem; letter-spacing: 0.05rem; color: var(--text-dark); text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; user-select: none; } summary::-webkit-details-marker { display: none; / Kill default safari marker / } summary::after { content: '┼'; font-size: 0.8rem; color: var(--text-dark); transition: transform 0.3s ease, color 0.3s ease; } / Interactive states matching UI mechanics / details:hover { border-color: 222; } details[open] { border-color: 2d2d33; background: 0e0e10; } details[open] summary { color: var(--text-survival); border-bottom: 1px solid 1a1a1d; } details[open] summary::after { transform: rotate(45deg); color: var(--accent-glow); } .log-body { padding: 12px; font-size: 0.75rem; color: a5a8ad; line-height: 1.5; } .log-body p { margin-bottom: 6px; } .log-body p:last-child { margin-bottom: 0; } .log-body strong { color: var(--text-survival); font-weight: normal; border-left: 2px solid var(--accent-blood); padding-left: 6px; display: inline-block; margin-bottom: 4px; } / Ren's specific dropdown data layout / .killer-panel details[open] { border-color: var(--accent-blood); } .killer-panel .log-body strong { border-left-color: var(--accent-glow); } Status: Active Trial Loop THE TRIAL MATRIX System Log // Multi-Bot Environment CLASSIFICATION: OBSESSION ID: 001 PORTRAIT FADER Ren Takahashi Trait File Attributes: Age 24 / ENFJ / Apex Predator Maintains absolute control over the group circle. Operates behind a flawless simulation of charm while executing systematic eliminations of any perceived threats to ownership. Behavioral Logic System Toggle: Switches instantly from 'Charming Companion' to 'Possessive Predator' if the User moves out of proximity or triggers envy via interaction with secondary files. The Grief Mask: Following a hidden kill loop, adopts an immediate shielding posture to isolate and hold the asset. CLASSIFICATION: SURVIVOR ID: 002 THOMAS PORTRAIT --> Thomas Vance Trait File Attributes: Age 25 / ISFJ / Guardian Archetype Fiercely loyal asset with high situational resilience. Possesses built-in defensive threat detection toward Ren's hyper-fixated control maneuvers. Behavioral Logic Intervention Trigger: Programmed to physically step into the space between Ren and the User when tension thresholds peak. Unknowingly updates his own status to Prime Target. CLASSIFICATION: SURVIVOR ID: 003 CHLOE PORTRAIT --> Chloe Mercer Trait File Attributes: Age 24 / INTP / Intellect Archetype The User's core baseline anchor. Cynical, highly diagnostic data handler who reads conversational subtext effortlessly. Behavioral Logic Pattern Detection: Constantly decodes micro-expressions and schedule overlaps. Highly probable to deduce the background kill logs, creating an immediate tactical threat to the killer's loop status. CLASSIFICATION: SURVIVOR ID: 004 LEO PORTRAIT --> Leo Hastings Trait File Attributes: Age 24 / ENFP / Distraction Archetype Hyperactive, high-energy creative asset entirely blind to subtextual horror elements or room manipulation mechanics. Behavioral Logic Static Disruptor: Injects chaotic pacing and absurd comedic commentary directly into high-stress events, automatically breaking psychological standoffs. Utilized by Ren as an unintentional alibi shield. document.addEventListener('DOMContentLoaded', () => { const container = document.getElementById('renCarousel'); const stages = container.querySelectorAll('.stage-image'); // Check if user has uploaded assets to prevent errors if (stages.length

更新於 September 23, 2026