<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>RESOCONTO CLINICO - H. Y. VENTRUE-KARNSTEIN</title>
<style>
/* 0. VARIABILI E FONT CYBERPUNK/RIFLESSIVO */
:root {
--color-bg: #000000;
--color-primary: #EE82EE; /* Viola Neon */
--color-secondary: #9932CC; /* Viola Scuro/Melanzana */
--color-accent-anguish: #FF4500; /* Arancio Rosso per il Tormento/Urgenza */
--color-house-conflict: #CC4444; /* Rosso Cupo Grifondoro */
--font-main: 'Share Tech Mono', monospace;
--font-narrative: 'Palatino Linotype', 'Georgia', serif;
}
/* 1. KEYFRAMES E ANIMAZIONI AVANZATE */
@keyframes pulse {
0%, 100% { box-shadow: 0 0 5px var(--color-primary), 0 0 10px var(--color-primary); }
50% { box-shadow: 0 0 15px var(--color-secondary), 0 0 20px var(--color-secondary); }
}
@keyframes data-flow {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(2px); }
}
/* 2. STRUTTURA BASE & SFONDO */
body {
font-family: var(--font-main);
background-color: var(--color-bg);
color: var(--color-primary);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
}
/* 3. COPERTINA/SCHERMO DI ACCESSO */
#access-screen {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.98);
z-index: 99;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: opacity 1.5s ease-out;
border: 10px solid var(--color-secondary);
}
.access-title {
font-size: 3.5em;
color: var(--color-primary);
text-shadow: 0 0 15px var(--color-primary);
margin-bottom: 20px;
animation: pulse 2s infinite;
}
#access-button {
padding: 15px 30px;
background: var(--color-house-conflict);
color: var(--color-bg);
border: none;
cursor: pointer;
font-size: 1.5em;
text-transform: uppercase;
letter-spacing: 2px;
transition: background 0.3s;
}
#access-button:hover { background: var(--color-secondary); color: var(--color-primary); }
/* 4. LAYOUT PRINCIPALE (GRID MODERNO) */
.codex-hud {
display: grid;
grid-template-columns: 2.5fr 1.5fr;
grid-template-rows: auto 1fr; /* Header e Contenuto */
gap: 20px;
max-width: 1400px;
width: 100%;
height: 90vh; /* Altezza definita */
padding: 20px;
border: 1px solid var(--color-secondary);
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(5px);
box-shadow: 0 0 50px var(--color-secondary);
opacity: 0;
}
.header-main { grid-column: 1 / 3; text-align: center; border-bottom: 2px solid var(--color-primary); padding-bottom: 10px; }
.header-main h1 { font-size: 2.8em; margin: 0; }
.header-main p { color: var(--color-house-conflict); margin: 5px 0 0 0; }
/* 5. MODULO BIOGRAFIA INTERATTIVA (CON SCORRIMENTO FORZATO) */
.bio-module {
grid-column: 1 / 2;
max-height: calc(90vh - 120px);
overflow-y: auto;
border: 1px dashed var(--color-secondary);
padding: 20px;
background: rgba(20, 0, 40, 0.3);
line-height: 1.8;
font-family: var(--font-narrative);
font-size: 1.05em;
}
/* Stile Scrollbar (per browser compatibili) */
.bio-module::-webkit-scrollbar { width: 8px; }
.bio-module::-webkit-scrollbar-track { background: var(--color-bg); }
.bio-module::-webkit-scrollbar-thumb { background: var(--color-secondary); border-radius: 4px; }
.bio-module::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }
.fragment-title {
color: var(--color-accent-anguish);
font-size: 1.6em;
cursor: pointer;
margin: 25px 0 10px 0;
border-bottom: 2px solid var(--color-secondary);
padding-bottom: 5px;
text-transform: uppercase;
font-family: var(--font-main);
}
.fragment-content {
height: 0;
overflow: hidden;
transition: height 0.7s ease-out;
padding-left: 15px;
text-align: justify;
}
.fragment-content p { margin-top: 0; margin-bottom: 25px; text-indent: 25px; }
.fragment-content strong { color: var(--color-house-conflict); }
.fragment-content em { color: var(--color-primary); font-style: normal; }
/* 6. COLONNA DATI & MAPPE (A DESTRA) */
.right-column {
grid-column: 2 / 3;
display: flex;
flex-direction: column;
gap: 20px;
}
.data-panel {
border: 1px solid var(--color-secondary);
padding: 15px;
background: rgba(20, 0, 40, 0.5);
}
.panel-title {
color: var(--color-primary);
font-size: 1.3em;
margin-bottom: 15px;
border-bottom: 1px dashed var(--color-accent-anguish);
}
.data-item {
display: flex;
justify-content: space-between;
padding: 5px 0;
border-bottom: 1px dotted var(--color-secondary);
animation: data-flow 0.5s infinite alternate;
}
.inventory-list { list-style: none; padding: 0; }
.inventory-list li {
padding: 8px 0;
border-bottom: 1px dotted var(--color-secondary);
font-size: 0.95em;
}
.inventory-list strong { color: var(--color-secondary); }
.inventory-list em { color: var(--color-primary); font-style: normal; }
/* Stili per le IMMAGINI PG e MAPPE */
.image-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.img-holo, .map-holo {
border: 3px solid var(--color-primary);
box-shadow: 0 0 10px var(--color-primary);
overflow: hidden;
position: relative;
}
.img-holo {
width: 120px;
height: 120px;
border-radius: 50%; /* Rende l'immagine circolare */
display: flex;
justify-content: center;
align-items: center;
}
.map-holo { width: 200px; height: 120px; }
/* Stili per l'immagine del PG (senza filtro hue-rotate per mantenerne i colori originali) */
#pgPhoto {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8; /* Leggera trasparenza */
/* Nessun filter: hue-rotate(-60deg) per mantenere i colori originali */
}
/* Stili per le immagini delle Mappe (con filtro hue-rotate per l'effetto olografico) */
.map-holo img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
filter: hue-rotate(-60deg) saturate(2); /* Filtro Viola/Ciano */
}
.map-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: var(--color-accent-anguish);
text-align: center;
line-height: 120px;
font-size: 0.9em;
text-transform: uppercase;
}
.map-button-swap {
background: var(--color-secondary);
color: var(--color-bg);
border: none;
padding: 5px 10px;
cursor: pointer;
margin-top: 5px;
transition: background 0.3s;
}
.map-button-swap:hover { background: var(--color-primary); color: var(--color-bg); }
</style>
<script>
function toggleAccess() {
const screen = document.getElementById('access-screen');
const codex = document.getElementById('codex-hud');
screen.style.opacity = '0';
setTimeout(() => {
screen.style.display = 'none';
codex.style.opacity = '1';
}, 1500);
}
function toggleFragment(id) {
const content = document.getElementById(id);
if (content.style.height === '0px' || content.style.height === '') {
content.style.height = content.scrollHeight + 30 + 'px';
} else {
content.style.height = '0px';
}
}
let currentMapIndex = 0;
const mapSources = [
"https://cdn.discordapp.com/attachments/1183307524949182594/1218059040061993020/PUNTI_DI_INTERESSE_HOGWARTS.png",
"https://cdn.discordapp.com/attachments/1183307524949182594/1218063467661555772/RETE_DI_LEALTA.png",
"link_alla_tua_immagine_mappa_3_piani_per_hogwarts"
];
const mapLabels = [
"ANALISI OBIETTIVI (STATUS QUO)",
"RETE DI LEALTÀ (DEBITI ETICI)",
"ASSET HOGWARTS (PUNTI VULNERABILI)"
];
function swapMap() {
const container = document.getElementById('mapImageContainer');
const overlay = document.getElementById('mapOverlay');
const button = document.querySelector('.map-button-swap');
if (mapSources.length === 0) return;
currentMapIndex = (currentMapIndex + 1) % mapSources.length;
container.src = mapSources[currentMapIndex];
overlay.textContent = mapLabels[currentMapIndex];
button.textContent = 'SWAP: ' + mapLabels[(currentMapIndex + 1) % mapSources.length];
}
// Inizializzazione
document.addEventListener('DOMContentLoaded', function() {
// IMMAGINE DEL PG INSERITA QUI
document.getElementById('pgPhoto').src = "https://i.postimg.cc/3xfDsGWJ/4a5adea5fddca61007a4b588e62e12ed.jpg";
// Inizializzazione delle mappe
if (mapSources.length > 0) {
document.getElementById('mapImageContainer').src = mapSources[0];
document.getElementById('mapOverlay').textContent = mapLabels[0];
document.querySelector('.map-button-swap').textContent = 'SWAP: ' + mapLabels[1];
}
});
</script>
</head>
<body>
<div id="access-screen">
<div class="access-title">HOGWARTS: RESOCONTO CLINICO V-K.</div>
<p style="color: var(--color-secondary); font-size: 1.2em;">PROTOCOL-77: RILEVATO CONFLITTO ETICO. ACCESSO RISERVATO.</p>
<button id="access-button" onclick="toggleAccess()">AVVIA SEQUENZA DI LETTURA</button>
</div>
<div id="codex-hud" class="codex-hud">
<header class="header-main">
<h1>HERMANN YAROSLAV VENTRUE-KARNSTEIN</h1>
<p>GRIFONDORO: L'ANOMALIA ETICA. ANNO VI</p>
</header>
<div class="bio-module">
<h2 style="color: var(--color-secondary); border-bottom: 1px dashed var(--color-primary); font-family: var(--font-main); font-size: 1.8em;">LOG. NARRATIVA: ANALISI INTERNA</h2>
<div class="fragment-title" onclick="toggleFragment('fragment1')">01. IL LASCITO INASPETTATO E IL PESO DELLA LOGICA</div>
<div id="fragment1" class="fragment-content">
<p>Non sono un criminale. Sono un **contabile**. E la mia contabilità è sporca, lo so. Il nome, Karnstein, è un inchiostro scuro su una pergamena antica, una promessa sussurrata di potere che non dà soddisfazione, ma solo la fame. Non ho avuto un'infanzia, ho avuto solo lezioni di **controllo aziendale** applicate al sangue. Mia madre mi guardava come se fossi il suo più costoso asset. Nessun abbraccio. Solo istruzioni precise su come muovere le persone, come se fossero pedine su una scacchiera di città europee. La parte Ventrue è la maledizione del mio lato magico: la necessità di **dare un senso** a questo caos, di creare un ordine in cui **nessuno soffra inutilmente**. Questo è il mio tormento. Io **posso** dominare, ma devo scegliere **se** farlo, se sia la cosa più logica, meno dispendiosa, meno crudele. Questo dualismo mi sta distruggendo. È come cercare di fare di conto mentre la tua testa brucia per la sete.</p>
<p>Ho trascorso anni in biblioteche fredde, non per i libri di magia, ma per i **trattati di filosofia morale**. Cercavo un'equazione che mi permettesse di essere un predatore con la coscienza pulita. Non esiste. E questo mi rende furioso, mi rende un pessimo candidato per il ruolo di Principe oscuro. Sono solo un ragazzo con un sangue troppo vecchio e un cervello che funziona troppo bene, sprecando tempo a chiedermi se l'azione più efficiente è anche l'azione giusta. La Magia? L'ho imparata per pura necessità di sopravvivenza, ma la trovo rozza, **emotiva**. È un'arte di sentimenti urlati. Io preferisco il silenzio della logica.</p>
<p>C'è una costante, sorda, pulsazione sotto la pelle. Non è rabbia. È la **fame** del Karnstein. Non è mai violenta, è paziente, logorante. Ti fa vedere il valore di ogni cosa: l'energia sprecata in un litigio, il costo emotivo di una bugia, la **fragilità** della carne umana. La pace che cerco non è assenza di conflitto, ma assenza di spreco. E in questo mondo magico, tutti sprecano. Tutti urlano. Tutti cadono preda di un'emozione inutile. Il mio compito, il mio fardello, è minimizzare quel rumore. Dare un senso a tutto, anche se il senso è freddo, metallico, e privo di gioia. La mia è la pace del **cimitero**: silenziosa, definitiva, e soprattutto, ordinata.</p>
</div>
<div class="fragment-title" onclick="toggleFragment('fragment2')">02. GRIFONDORO: L'ASSURDITÀ DELLA SCIARPA SCARLATTA</div>
<div id="fragment2" class="fragment-content">
<p>Il Cappello Parlante è un fottuto idiota. Ha urlato **GRIFONDORO**. Una decisione così illogica che è quasi affascinante. Mi ha piazzato qui, tra gli eroi con i nervi a fior di pelle, gli idealisti che credono ancora nel bene e nel male assoluti. Non l'ha fatto per il mio "coraggio". L'ha fatto perché il mio conflitto interiore, il mio **tormento etico**, era l'unica cosa abbastanza violenta e disordinata da qualificarmi. **Sono un'Anomalia.** La mia vera natura è il controllo, ma il mio destino è la lotta costante contro essa.</p>
<p>La Casa è un'agonia quotidiana. Devo simulare un'onestà che non sento del tutto. Ma è anche la mia migliore arma. Se fossi a Serpeverde, dovrei giustificare ogni mossa. Qui, le mie fredde decisioni sembrano solo una **fortezza di volontà**. Posso prendere la decisione più spietata e farla passare per **necessità strategica**. Mi guardano e vedono la fredda determinazione, non il predatore. Ma la loro stupidità è un veleno lento. Voglio proteggerli dal caos, dalla loro stessa ingenuità. Non per affetto, ma perché un mondo ordinato rende più facile la **gestione degli asset**. La loro sopravvivenza è utile alla mia logica. E questo, in qualche modo, assomiglia al coraggio. L'assurdità è totale. Ho scambiato il mio regno Ventrue per una condanna all'etica.</p>
<p>Passo il mio tempo a osservare i Grifondoro. I loro gesti grandiosi, le loro promesse vuote, la loro incapacità di vedere due mosse in avanti. È estenuante. Mi costringono a una continua **valutazione del rischio**. Se non intervengo, si distruggeranno. Se intervengo, sono un manipolatore. Non c'è vittoria. C'è solo l'atto di bilanciare la bilancia, di impedire che il piatto si rovesci del tutto. La mia lealtà a Grifondoro non è al suo stemma, ma al **principio di stabilità** che inconsciamente rappresenta: il desiderio infantile di un mondo senza ombre. È una missione impossibile, lo so, ma la mia logica richiede che io la persegua. E così indosso il rosso, e mento al mondo, e soprattutto, mento al sangue che mi scorre nelle vene.</p>
</div>
<div class="fragment-title" onclick="toggleFragment('fragment3')">03. ARCHITETTURA DELLA MORTE E IL CODICE PERSONALE (ANNO VI)</div>
<div id="fragment3" class="fragment-content">
<p>Sono al Sesto Anno, il punto in cui la strategia diventa **vita o morte**. La mia ossessione non è più solo il potere, è la **stabilità**. Il mio obiettivo primario è **stabilizzare** il mio ruolo e la mia discendenza, minimizzando le perdite inutili. Ogni persona che "gestisco" non è una vittima, ma un elemento di un sistema che deve funzionare senza intoppi. Il **Diario dei Debiti** non registra le debolezze da sfruttare; registra i **punti di leva** necessari per prevenire il collasso. È la mia bibbia di <span style="color: var(--color-primary);">sicurezza interna</span>. Se devo manipolare qualcuno per impedirgli di distruggersi o di danneggiare il mio fragile equilibrio, lo farò. Questo è il mio codice: **efficienza etica**. È un paradosso, lo so. Ma è l'unico modo per non cadere completamente nel lato oscuro che il mio sangue mi richiede.</p>
<p>La sete è costante. La affronto con la logica: ritmi precisi, fonti controllate (non umane, per ora), meditazione sulla fredda **filosofia del non-sentire**. Ma il Corvo, **Logos**, è un costante promemoria di ciò che sono: un osservatore solitario, un occhio che vede tutto e non prova nulla. L'unico calore che ho mai permesso nella mia vita è stato quello riflesso dalle fiamme della **Trasfigurazione** – la capacità di rimodellare la realtà in qualcosa di più logico, più sicuro, e meno **soggetto al capriccio emotivo**. La mia vita non sarà una tragedia, ma un teorema perfettamente dimostrato.</p>
</div>
</div>
<div class="right-column">
<div class="image-container">
<div class="img-holo">
<img id="pgPhoto" alt="Ritratto (Ego)">
</div>
<div class="map-panel">
<p class="panel-title" style="text-align: center;">MAPPING OLOGRAFICO (LE VERE OSSESSIONI)</p>
<div class="map-holo">
<img id="mapImageContainer" src="" alt="Mappa Dinamica">
<div id="mapOverlay" class="map-overlay">INIZIALIZZAZIONE...</div>
</div>
<button class="map-button-swap" onclick="swapMap()">SWAP: ANALISI OBIETTIVI</button>
</div>
</div>
<div class="data-panel">
<p class="panel-title">STATO ATTUALE: ANOMALIA LOGICA</p>
<div class="data-list">
<div class="data-item"><span class="data-label">CLASSIFICAZIONE H.P.:</span> <span style="color: var(--color-house-conflict);">GRIFONDORO (Anomalia)</span></div>
<div class="data-item"><span class="data-label">STATO DI CARICA (FAME):</span> <span style="color: var(--color-accent-anguish);">78% CRITICO (Gestito)</span></div>
<div class="data-item"><span class="data-label">BACCHETTA (CORE):</span> <span style="color: var(--color-primary);">CUORE DI VAMPIRO (Padre)</span></div>
<div class="data-item"><span class="data-label">LEGNO BACCHETTA:</span> <span style="color: var(--color-primary);">EBANO</span></div>
<div class="data-item"><span class="data-label">LUNGHEZZA/FLESSIBILITÀ:</span> <span style="color: var(--color-primary);">14 POLLICI / INDEFORMABILE</span></div>
<div class="data-item"><span class="data-label">OBIETTIVO PRINCIPALE:</span> <span style="color: var(--color-secondary);">STABILIZZAZIONE ETICA</span></div>
</div>
</div>
<div class="data-panel">
<p class="panel-title">GUFO REGISTRATI: LOGICA PURA (ANNO V)</p>
<ul class="gufo-list">
<li>Difesa Contro le Arti Oscure: <span style="color: var(--color-accent-anguish);">E (Eccenzionale)</span></li>
<li>Trasfigurazione: <span style="color: var(--color-accent-anguish);">E (Eccenzionale)</span></li>
<li>Aritmanzia: <span style="color: var(--color-accent-anguish);">E (Eccenzionale)</span></li>
<li>Pozioni: <span style="color: var(--color-accent-anguish);">O (Oltre Ogni Previsione)</span></li>
<li>Incantesimi: <span style="color: var(--color-accent-anguish);">O (Oltre Ogni Previsione)</span></li>
<li>Storia della Magia: <span style="color: var(--color-accent-anguish);">E (Eccenzionale)</span></li>
<li>Cura delle Creature Magiche: <span style="color: var(--color-accent-anguish);">A (Accettabile)</span></li>
</ul>
</div>
<div class="data-panel">
<p class="panel-title">INVENTARIO DETTAGLIATO: OGGETTI DI LEVA</p>
<ul class="inventory-list">
<li><strong>Diario in Pelle di Lucertola Nera:</strong> <em>Registro dei Debiti Etici e Punti di Leva. Archivio di dati sensibili.</em></li>
<li><strong>Anello di Lignaggio Karnstein:</strong> <em>Nodo Psichico. Mantiene la connettività con gli Agenti Esterni e la Linea di Sangue.</em></li>
<li><strong>Kit di Pozioni (Limitato):</strong> <em>Dittamo, Antidoti e una fiala di Siero della Pace (per la gestione personale).</em></li>
<li><strong>Veritaserum (Fiala Singola):</strong> <em>L'ultima risorsa per la **Verità Assoluta**. Da usare solo in caso di fallimento logico.</em></li>
<li><strong>Orologio da Tasca con Cronometro:</strong> <em>Ossessione per il tempo e l'efficienza. Segna il battito lento e controllato.</em></li>
<li><strong>Vesti Anti-Malocchio Modificate:</strong> <em>Protezione passiva contro la manipolazione emotiva. Strato esterno in seta di Acromantula.</em></li>
</ul>
</div>
</div>
</div>
</body>
</html>