/* ============================================
   MORTIVAGUS — dark minimal
   ============================================ */
*{margin:0;padding:0;box-sizing:border-box}

body{
    background:#111;
    color:#ddd;
    font-family:'Courier New',monospace;
    font-size:12px;
    line-height:1.5;
    overflow:hidden;
    -webkit-tap-highlight-color:transparent;
    -webkit-user-select:none;
    user-select:none;
}
body.unlocked{overflow-y:auto}

/* ============ GATE ============ */
#gate{
    position:fixed;inset:0;z-index:1000;
    background:#111;
    display:flex;flex-direction:column;
    touch-action:none;
}
#gate.hidden{display:none}

.gate-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 20px;
    border-bottom:1px solid #3a3a3a;
}
.gate-logo{
    font-size:11px;
    color:#ccc;
    letter-spacing:4px;
}
.gate-status{
    font-size:9px;
    color:#bbb;
    display:flex;
    align-items:center;
    gap:6px;
}
.status-dot{
    width:5px;height:5px;
    background:#bbb;
    border-radius:50%;
    display:inline-block;
    animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* --- CANDLE ZONE --- */
#candle-zone{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    cursor:grab;
    overflow:hidden;
}
#candle-zone:active{cursor:grabbing}

#candle{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* Glow — larger, more ominous */
#flame-glow{
    position:absolute;
    top:-80px;left:50%;
    transform:translateX(-50%);
    width:280px;height:280px;
    background:radial-gradient(circle,
        rgba(200,60,20,.08) 0%,
        rgba(180,40,10,.04) 25%,
        rgba(120,20,0,.02) 50%,
        transparent 70%
    );
    border-radius:50%;
    pointer-events:none;
    transition:opacity .3s;
    animation:glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse{
    0%,100%{opacity:.8;transform:translateX(-50%) scale(1)}
    50%{opacity:1;transform:translateX(-50%) scale(1.05)}
}

/* Smoke */
#smoke-wrap{
    position:absolute;
    top:-40px;left:50%;
    transform:translateX(-50%);
    width:20px;height:60px;
    pointer-events:none;
}
.smoke{
    position:absolute;
    bottom:0;
    width:3px;height:3px;
    background:rgba(150,130,110,.12);
    border-radius:50%;
    filter:blur(2px);
    animation:smokeRise 4s ease-out infinite;
}
.smoke.s1{left:4px;animation-delay:0s}
.smoke.s2{left:9px;animation-delay:1.3s}
.smoke.s3{left:7px;animation-delay:2.6s}
@keyframes smokeRise{
    0%{opacity:.4;transform:translateY(0) scale(1)}
    40%{opacity:.2;transform:translateY(-25px) translateX(6px) scale(2)}
    100%{opacity:0;transform:translateY(-55px) translateX(-4px) scale(3)}
}

/* Flame wrapper — this gets transformed by JS */
#flame-wrap{
    position:relative;
    width:30px;
    height:55px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    transition:transform .15s ease-out;
    transform-origin:bottom center;
}

/* Flame — more erratic, more alive */
#flame{
    width:13px;
    height:40px;
    background:linear-gradient(to top,
        #FF8C00 0%,
        #FF5500 15%,
        #E03000 35%,
        #AA1500 55%,
        rgba(120,10,0,.3) 78%,
        transparent 100%
    );
    border-radius:50% 50% 30% 30%;
    position:relative;
    animation:flicker .1s ease-in-out infinite alternate;
    filter:blur(.5px);
}
.flame-core{
    position:absolute;
    bottom:2px;left:50%;
    transform:translateX(-50%);
    width:5px;height:14px;
    background:linear-gradient(to top,#fffde0 0%,#FFCC00 40%,#FF8800 70%,transparent 100%);
    border-radius:50%;
    animation:coreFlicker .08s ease-in-out infinite alternate;
}
.flame-flick{
    position:absolute;
    top:2px;left:50%;
    transform:translateX(-50%);
    width:6px;height:10px;
    background:linear-gradient(to top,rgba(255,80,0,.3),transparent);
    border-radius:50%;
    animation:flickSide .3s ease-in-out infinite alternate;
}
#flame::after{
    content:'';
    position:absolute;
    top:-12px;left:50%;transform:translateX(-50%);
    width:26px;height:26px;
    background:radial-gradient(circle,rgba(255,100,30,.1) 0%,rgba(200,50,0,.03) 40%,transparent 70%);
    border-radius:50%;
}

@keyframes flicker{
    0%{height:37px;width:12px;opacity:.88}
    25%{height:42px;width:14px;opacity:1}
    50%{height:38px;width:11px;opacity:.92}
    75%{height:44px;width:13px;opacity:.96}
    100%{height:39px;width:12px;opacity:.9}
}
@keyframes coreFlicker{
    0%{height:13px;opacity:.9}
    50%{height:16px;opacity:1}
    100%{height:14px;opacity:.85}
}
@keyframes flickSide{
    0%{transform:translateX(-70%) rotate(-5deg);opacity:.4}
    100%{transform:translateX(-30%) rotate(5deg);opacity:.2}
}

/* Wick — charred, with ember glow */
#wick{
    width:2px;height:8px;
    background:linear-gradient(to top,#222,#444,#222);
    position:relative;
    border-radius:0 0 1px 1px;
}
.ember{
    position:absolute;
    top:-1px;left:50%;
    transform:translateX(-50%);
    width:4px;height:3px;
    background:radial-gradient(circle,#FF6600,#CC3300,transparent);
    border-radius:50%;
    animation:emberGlow 1.5s ease-in-out infinite;
}
@keyframes emberGlow{
    0%,100%{opacity:.6;transform:translateX(-50%) scale(1)}
    50%{opacity:1;transform:translateX(-50%) scale(1.3)}
}

/* Candle body — darker, worn, cracked */
#candle-body{
    width:24px;
    height:100px;
    background:
        linear-gradient(to right,#4a0e0e,#6b1515 20%,#7a1a1a 50%,#6b1515 80%,#4a0e0e);
    position:relative;
    border-radius:1px 1px 0 0;
    box-shadow:
        inset 2px 0 4px rgba(0,0,0,.3),
        inset -2px 0 4px rgba(0,0,0,.3);
}

/* Melted wax rim at top */
.wax-rim{
    position:absolute;
    top:-3px;left:-3px;right:-3px;
    height:8px;
    background:radial-gradient(ellipse at center,#8a2222 0%,#6b1515 60%,#4a0e0e 100%);
    border-radius:50%;
}

/* Wax drips — more, longer, irregular */
.wax-drip{
    position:absolute;
    background:#7a1a1a;
    border-radius:0 0 50% 50%;
}
.drip-1{top:4px;left:-4px;width:6px;height:35px;animation:dripGrow 8s ease-in infinite}
.drip-2{top:12px;right:-3px;width:5px;height:22px}
.drip-3{top:20px;left:-2px;width:4px;height:45px;animation:dripGrow 12s ease-in 3s infinite}
.drip-4{top:6px;right:-4px;width:5px;height:55px;border-radius:0 0 40% 60%}
.drip-5{top:35px;left:1px;width:3px;height:18px}

@keyframes dripGrow{
    0%,80%{height:inherit}
    90%{height:calc(100% + 5px)}
    100%{height:inherit}
}

/* Cracks / scratches */
.body-crack{
    position:absolute;
    background:rgba(0,0,0,.25);
    pointer-events:none;
}
.crack-1{
    top:30px;left:6px;
    width:1px;height:20px;
    transform:rotate(8deg);
}
.crack-2{
    top:55px;right:5px;
    width:1px;height:15px;
    transform:rotate(-12deg);
}

/* Wax pool at base */
#wax-pool{
    width:44px;height:8px;
    background:radial-gradient(ellipse,#6b1515 0%,#4a0e0e 60%,transparent 100%);
    border-radius:50%;
    margin-top:-2px;
}

#candle-base{
    width:36px;height:5px;
    background:linear-gradient(to right,#2a0808,#3a0c0c,#2a0808);
    border-radius:0 0 2px 2px;
    box-shadow:0 2px 8px rgba(80,10,0,.15);
}

/* Wind burst effect classes */
.wind-left #flame-wrap{transform:rotate(18deg) translateX(-3px)}
.wind-right #flame-wrap{transform:rotate(-18deg) translateX(3px)}
.wind-up #flame-wrap{transform:scaleY(1.3) scaleX(.7)}
.wind-down #flame-wrap{transform:scaleY(.5) scaleX(1.2);opacity:.7}

/* Fail: flame dies, smoke rises */
.flame-dead #flame{
    height:3px!important;width:3px!important;
    opacity:.1!important;
    animation:none!important;
    filter:none!important;
    background:#441100!important;
}
.flame-dead .flame-core{display:none}
.flame-dead .flame-flick{display:none}
.flame-dead #flame-glow{opacity:0}
.flame-dead .ember{opacity:0}
.flame-dead .smoke{
    animation:smokeRiseDead 3s ease-out infinite!important;
    opacity:.5!important;
    background:rgba(120,110,100,.2)!important;
}
@keyframes smokeRiseDead{
    0%{opacity:.5;transform:translateY(0) scale(1)}
    50%{opacity:.3;transform:translateY(-30px) translateX(8px) scale(3)}
    100%{opacity:0;transform:translateY(-60px) translateX(-5px) scale(4)}
}

/* Success: flame flares violently */
.flame-flare #flame{
    height:70px!important;width:20px!important;
    filter:blur(1px) brightness(1.4)!important;
    animation:none!important;
}
.flame-flare .flame-core{
    height:25px!important;width:9px!important;
}
.flame-flare .flame-flick{
    height:18px!important;width:10px!important;
    opacity:.5!important;
}
.flame-flare #flame-glow{
    width:400px!important;height:400px!important;
    background:radial-gradient(circle,rgba(255,120,30,.15) 0%,rgba(200,60,10,.06) 35%,transparent 65%)!important;
    animation:none!important;
}

/* --- GATE BOTTOM --- */
.gate-bottom{
    text-align:center;
    padding:20px;
    border-top:1px solid #3a3a3a;
}

#progress-dots{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-bottom:12px;
}
.dot{
    width:8px;height:8px;
    border:1px solid #555;
    border-radius:50%;
    background:#181818;
    transition:all .4s;
}
.dot.filled{
    background:#ccaa77;
    border-color:#ccaa77;
    box-shadow:0 0 8px rgba(204,170,119,.5);
}
.dot.success{
    background:#55bb55;
    border-color:#55bb55;
    box-shadow:0 0 8px rgba(85,187,85,.5);
}
.dot.fail{
    background:#bb5555;
    border-color:#bb5555;
    box-shadow:0 0 8px rgba(187,85,85,.5);
}

#gate-msg{
    font-size:10px;
    color:#ccc;
    letter-spacing:1px;
    min-height:16px;
    margin-bottom:8px;
}

#restart-btn{
    background:#181818;
    border:1px solid #555;
    color:#ddd;
    font-family:'Courier New',monospace;
    font-size:10px;
    letter-spacing:2px;
    padding:10px 25px;
    cursor:pointer;
    transition:all .3s;
}
#restart-btn:hover{
    background:#2a2a2a;
    border-color:#888;
    color:#fff;
}

.gate-hint{
    font-size:9px;
    color:#aaa;
    margin-top:8px;
}

/* ============ SITE ============ */
#site.locked{display:none}
#site{
    display:block;
    background:#111;
}

.site-container{
    max-width:600px;
    margin:0 auto;
    padding:0 15px 40px;
}

/* Header */
.site-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 0;
    border-bottom:1px solid #3a3a3a;
    margin-bottom:15px;
}
.site-logo{
    font-size:12px;
    color:#ddd;
    letter-spacing:4px;
}
.site-status{
    font-size:9px;
    color:#bbb;
    display:flex;
    align-items:center;
    gap:6px;
}

/* Separator */
.separator{
    border-top:1px solid #3a3a3a;
    margin:20px 0;
}

/* Sections */
.section{margin-bottom:5px}

.section-title{
    font-size:10px;
    font-weight:normal;
    color:#ccc;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:12px;
}

/* Welcome */
.welcome-box{
    background:#181818;
    border:1px solid #3a3a3a;
    padding:20px;
}
.welcome-box p{margin-bottom:6px}

/* Colors */
.accent{color:#ee9999}
.accent-subtle{color:#ddbb88}
.muted{color:#aaa}
.highlight{color:#eedd99}
.clue{color:#eecca8;text-decoration:underline;text-decoration-color:#444;text-underline-offset:3px;text-decoration-thickness:1px}
.clue-red{text-decoration:underline;text-decoration-color:#444;text-underline-offset:3px;text-decoration-thickness:1px}
.clue-blue{text-decoration:underline;text-decoration-color:#444;text-underline-offset:3px;text-decoration-thickness:1px}
.clue-green{text-decoration:underline;text-decoration-color:#444;text-underline-offset:3px;text-decoration-thickness:1px}
.clue-yellow{text-decoration:underline;text-decoration-color:#444;text-underline-offset:3px;text-decoration-thickness:1px}
.clue-dark{text-decoration:underline;text-decoration-color:#444;text-underline-offset:3px;text-decoration-thickness:1px}

/* Blink */
.blink{animation:bk 1.5s ease-in-out infinite}
@keyframes bk{0%,100%{opacity:1}50%{opacity:.3}}

/* (3D model removed) */

/* Tenets */
.tenet{
    display:flex;
    gap:12px;
    padding:12px 0;
    border-bottom:1px solid #3a3a3a;
    font-size:12px;
    color:#ddd;
    line-height:1.7;
}
.tenet:last-child{border-bottom:none}
.tenet-num{
    color:#bbb;
    font-size:14px;
    flex-shrink:0;
    width:24px;
}
.tenet-name{
    color:#ddbb88;
    letter-spacing:1px;
}

/* Table */
.data-table{
    width:100%;
    border-collapse:collapse;
    font-size:11px;
    margin-bottom:8px;
}
.data-table td{
    padding:8px 10px;
    border-bottom:1px solid #3a3a3a;
    color:#ddd;
}
.data-table tr:last-child td{border-bottom:none}
.table-date{color:#eee;white-space:nowrap}

/* Redacted */
.redacted{
    background:#775555;
    color:#775555;
    padding:1px 6px;
    cursor:pointer;
    font-size:9px;
    transition:color .3s;
}
.redacted:hover{color:#eebb99}

.redacted-inline{
    background:#443030;
    color:#443030;
    padding:1px 6px;
    cursor:pointer;
    transition:color .3s;
}
.redacted-inline:hover{color:#cc9999}

.note{
    font-size:9px;
    color:#bbb;
    font-style:italic;
}

/* Message block */
.message-block{
    background:#141414;
    border-left:2px solid #666;
    padding:15px 18px;
    color:#ddd;
    line-height:1.8;
}
.message-block p{margin-bottom:8px}
.message-sig{
    display:flex;
    justify-content:space-between;
    margin-top:12px;
    padding-top:8px;
    border-top:1px solid #3a3a3a;
    font-size:10px;
}

/* Rules */
.rules-list p{
    padding:4px 0;
    color:#ddd;
}
.rule-num{
    color:#bbb;
    margin-right:6px;
}

/* Chat/Guestbook */
.chat-log{
    background:#141414;
    border:1px solid #3a3a3a;
    padding:2px 0;
}
.chat-entry{
    padding:6px 12px;
    line-height:1.5;
    border-bottom:1px solid #333;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.chat-entry:last-child{border-bottom:none}
.chat-entry.system{background:rgba(255,255,255,.02)}
.chat-time{
    color:#999;
    font-size:9px;
    flex-shrink:0;
    width:36px;
}
.chat-user{
    color:#ccc;
    font-size:11px;
    flex-shrink:0;
}
.chat-user.admin{color:#cc7777}
.chat-user.highlight{color:#eedd99}
.chat-text{
    color:#ddd;
    font-size:11px;
    flex:1;
}
.chat-text.admin{color:#cc7777;font-style:italic}
.chat-text.highlight{color:#eedd99}

/* Eye Chamber — peephole with dormant/awaken states */
#eye-chamber{
    position:relative;
    width:100%;
    min-height:320px;
    padding:20px 18px 80px;
    background:#0e0e0e;
    border:1px solid #3a3a3a;
    overflow:hidden;
    touch-action:auto;
    -webkit-user-select:none;
    user-select:none;
    transition:background 2s ease;
}

/* --- Dormant state --- */
#eye-chamber.dormant{
    cursor:default;
}
#eye-chamber.dormant #eye-icon{
    filter:brightness(.6) saturate(.4);
    animation:dormantBreath 4s ease-in-out infinite;
    cursor:pointer;
    pointer-events:auto;
}
@keyframes dormantBreath{
    0%,100%{filter:brightness(.6) saturate(.4);transform:translate(-50%,-50%) scale(1)}
    50%{filter:brightness(.8) saturate(.5);transform:translate(-50%,-50%) scale(1.02)}
}
#eye-chamber.dormant #eye-text{
    opacity:0;
}
#eye-chamber.dormant #eye-glow{
    opacity:0;
}

/* --- Awakening animation --- */
#eye-chamber.awakening{
    background:#0e0e0e;
}
#eye-chamber.awakening #eye-icon{
    animation:eyeAwaken 2s ease-out forwards;
    pointer-events:none;
}
@keyframes eyeAwaken{
    0%{filter:brightness(.3) saturate(0);transform:translate(-50%,-50%) scale(1)}
    30%{filter:brightness(2) saturate(1.5);transform:translate(-50%,-50%) scale(1.3)}
    60%{filter:brightness(1.5) saturate(1.2);transform:translate(-50%,-50%) scale(1.1)}
    100%{filter:drop-shadow(0 0 15px rgba(200,100,50,.4)) drop-shadow(0 0 35px rgba(150,60,20,.2));transform:translate(-50%,-50%) scale(1)}
}
#eye-chamber.awakening #eye-glow{
    animation:glowBurst 2s ease-out forwards;
}
@keyframes glowBurst{
    0%{opacity:0;transform:translate(-50%,-50%) scale(0)}
    20%{opacity:1;transform:translate(-50%,-50%) scale(2.5)}
    50%{opacity:.7;transform:translate(-50%,-50%) scale(1.5)}
    100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
#eye-chamber.awakening #eye-text{
    animation:textFadeIn 2s 1.5s ease-out forwards;
    opacity:0;
}
@keyframes textFadeIn{
    0%{opacity:0}
    100%{opacity:1}
}

/* --- Awake state --- */
#eye-chamber.awake{
    background:#0e0e0e;
    cursor:grab;
    touch-action:none;
}
#eye-chamber.awake:active{cursor:grabbing}

#eye-glow{
    position:absolute;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    width:250px;height:250px;
    background:radial-gradient(circle,
        rgba(200,100,40,.12) 0%,
        rgba(150,60,20,.06) 30%,
        rgba(100,30,10,.02) 55%,
        transparent 70%
    );
    border-radius:50%;
    pointer-events:none;
    z-index:1;
    transition:opacity .5s;
}

#eye-text{
    position:relative;
    color:#ddbb88;
    font-size:17px;
    line-height:2;
    font-style:italic;
    z-index:1;
    -webkit-mask-image:radial-gradient(circle 65px at var(--eye-x,50%) var(--eye-y,50%),black 0%,transparent 100%);
    mask-image:radial-gradient(circle 65px at var(--eye-x,50%) var(--eye-y,50%),black 0%,transparent 100%);
}
#eye-text p{
    margin-bottom:14px;
}

#eye-icon{
    position:absolute;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    width:60px;height:60px;
    object-fit:contain;
    pointer-events:none;
    z-index:2;
    filter:drop-shadow(0 0 15px rgba(200,100,50,.4)) drop-shadow(0 0 35px rgba(150,60,20,.2));
    animation:eyePulse 3s ease-in-out infinite;
}
@keyframes eyePulse{
    0%,100%{filter:drop-shadow(0 0 15px rgba(200,100,50,.4)) drop-shadow(0 0 35px rgba(150,60,20,.2));transform:translate(-50%,-50%) scale(1)}
    50%{filter:drop-shadow(0 0 22px rgba(200,100,50,.6)) drop-shadow(0 0 45px rgba(150,60,20,.3));transform:translate(-50%,-50%) scale(1.05)}
}

/* Eye riddle */
#eye-riddle{
    position:absolute;
    bottom:15px;
    left:0;right:0;
    text-align:center;
    z-index:3;
    transition:opacity .8s;
}
.riddle-text{
    font-size:11px;
    color:#bbb;
    font-style:italic;
    letter-spacing:1px;
    margin-bottom:10px;
}
.riddle-input-wrap{
    display:flex;
    justify-content:center;
    gap:0;
}
#riddle-btn{
    background:#1a1a1a;
    border:1px solid #555;
    border-left:none;
    color:#aa8866;
    font-size:12px;
    padding:8px 14px;
    cursor:pointer;
    transition:all .3s;
    -webkit-appearance:none;
    line-height:1;
}
#riddle-btn:hover{
    background:#222;
    color:#ddbb88;
    border-color:#997755;
}
#riddle-input{
    background:#111;
    border:1px solid #555;
    color:#ddbb88;
    font-family:'Courier New',monospace;
    font-size:13px;
    letter-spacing:2px;
    text-align:center;
    padding:8px 16px;
    width:140px;
    outline:none;
    transition:border-color .3s;
    -webkit-user-select:text;
    user-select:text;
}
#riddle-input:focus{
    border-color:#997755;
}
#riddle-input::placeholder{
    color:#666;
}
#riddle-msg{
    font-size:9px;
    letter-spacing:1px;
    margin-top:8px;
    min-height:14px;
    transition:color .3s;
}

/* Hide riddle when not dormant */
#eye-chamber.awakening #eye-riddle,
#eye-chamber.awake #eye-riddle{
    opacity:0;
    pointer-events:none;
}

/* Code Pad */
#dossier-panel{
    background:#141414;
    border:1px solid #3a3a3a;
    padding:20px;
}

#code-display{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-bottom:18px;
}
.code-digit{
    width:32px;height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#111;
    border:1px solid #555;
    color:#aaa;
    font-family:'Courier New',monospace;
    font-size:16px;
    letter-spacing:0;
}
.code-digit.filled{
    color:#ddbb88;
    border-color:#997755;
}

#code-pad{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
    max-width:200px;
    margin:0 auto;
}
.pad-btn{
    background:#181818;
    border:1px solid #555;
    color:#ddd;
    font-family:'Courier New',monospace;
    font-size:14px;
    padding:12px 0;
    cursor:pointer;
    transition:all .15s;
    -webkit-tap-highlight-color:transparent;
}
.pad-btn:active{
    background:#333;
    border-color:#999;
    color:#fff;
}
.pad-clear{color:#ee9999;font-size:10px;letter-spacing:1px}
.pad-enter{color:#88dd88;font-size:10px;letter-spacing:1px}

/* Dossiers */
#dossiers-content{
    background:#141414;
    border:1px solid #3a3a3a;
    padding:15px;
}
.dossier-card{
    border:1px solid #3a3a3a;
    background:#181818;
    margin-bottom:10px;
}
.dossier-card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 12px;
    border-bottom:1px solid #3a3a3a;
    background:#1c1c1c;
}
.dossier-pseudo{
    color:#eecca8;
    letter-spacing:2px;
    font-size:11px;
}
.dossier-status{
    font-size:8px;
    letter-spacing:1px;
    text-transform:uppercase;
    padding:2px 6px;
    border-radius:1px;
}
.dossier-status.active{
    color:#88dd88;
    background:rgba(102,170,102,.15);
    border:1px solid rgba(102,170,102,.3);
}
.dossier-status.crossed{
    color:#ee9999;
    background:rgba(170,102,102,.15);
    border:1px solid rgba(170,102,102,.3);
}
.dossier-table{
    width:100%;
    border-collapse:collapse;
}
.dossier-table tr{
    border-bottom:1px solid #2a2a2a;
}
.dossier-table tr:last-child{border-bottom:none}
.dossier-table td{
    padding:5px 12px;
    font-size:10px;
    vertical-align:top;
}
.d-label{
    color:#888;
    width:100px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:9px;
}
.d-value{
    color:#ddd;
}

/* Dossier Slider */
.dossier-slider-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-bottom:12px;
}
.slider-arrow{
    background:#1a1a1a;
    border:1px solid #3a3a3a;
    color:#ddd;
    font-family:'Courier New',monospace;
    font-size:18px;
    width:36px;height:36px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    -webkit-tap-highlight-color:transparent;
    transition:all .15s;
}
.slider-arrow:active{
    background:#333;
    border-color:#666;
}
.slider-counter{
    color:#aaa;
    font-size:11px;
    letter-spacing:1px;
    min-width:60px;
    text-align:center;
}
.dossier-slider{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:0;
}
.dossier-slider::-webkit-scrollbar{display:none}
.dossier-slider .dossier-card{
    flex:0 0 100%;
    scroll-snap-align:start;
    margin-bottom:0;
}

/* Baby locator — hangman */
#hangman{
    position:relative;
    width:120px;
    height:140px;
    margin:0 auto 16px;
}
.gallows-base{
    position:absolute;
    bottom:0;left:10px;
    width:100px;height:2px;
    background:#664444;
}
.gallows-pole{
    position:absolute;
    bottom:0;left:25px;
    width:2px;height:130px;
    background:#664444;
}
.gallows-top{
    position:absolute;
    top:0;left:25px;
    width:60px;height:2px;
    background:#664444;
}
.gallows-rope{
    position:absolute;
    top:2px;left:83px;
    width:2px;height:20px;
    background:#886655;
}
.hm-figure{
    position:absolute;
    top:22px;left:72px;
}
.hm-head{
    width:20px;height:20px;
    border:2px solid #cc8888;
    border-radius:50%;
    margin-left:1px;
    opacity:0;
    transition:opacity .4s;
}
.hm-torso{
    width:2px;height:30px;
    background:#cc8888;
    margin-left:10px;
    opacity:0;
    transition:opacity .4s;
}
.hm-arms{
    position:absolute;
    top:30px;left:-10px;
    width:44px;height:2px;
    background:#cc8888;
    opacity:0;
    transition:opacity .4s;
}
.hm-legs{
    position:absolute;
    top:52px;left:0;
    width:24px;height:24px;
    opacity:0;
    transition:opacity .4s;
}
.hm-legs::before,.hm-legs::after{
    content:'';
    position:absolute;
    top:0;
    width:2px;height:24px;
    background:#cc8888;
}
.hm-legs::before{left:4px;transform:rotate(15deg)}
.hm-legs::after{right:4px;transform:rotate(-15deg)}
.hm-visible{opacity:1!important}

/* Hangman drop animation */
@keyframes hangDrop{
    0%{transform:translateY(0)}
    30%{transform:translateY(8px)}
    50%{transform:translateY(2px)}
    70%{transform:translateY(6px)}
    100%{transform:translateY(4px)}
}
.hm-figure.dropped{animation:hangDrop .6s ease-out forwards}

#baby-code-display{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-bottom:14px;
}
#baby-nums{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:5px;
    max-width:240px;
    margin:0 auto;
}
.num-btn{
    width:32px;height:32px;
    background:#1a1111;
    border:1px solid #553333;
    color:#cc9999;
    font-family:'Courier New',monospace;
    font-size:13px;
    cursor:pointer;
    transition:all .15s;
    display:flex;
    align-items:center;
    justify-content:center;
    -webkit-tap-highlight-color:transparent;
}
.num-btn:active{
    background:#442222;
    border-color:#aa6666;
    color:#fff;
}
.num-clr{
    font-size:16px;
    color:#aa5555;
}
#binary-scroll{
    background:#0a0a0a;
    border:1px solid #332222;
    padding:12px;
    font-family:'Courier New',monospace;
    font-size:11px;
    color:#66aa66;
    letter-spacing:2px;
    line-height:1.8;
    min-height:40px;
    white-space:nowrap;
    overflow-x:auto;
    -webkit-user-select:text;
    user-select:text;
    scrollbar-width:thin;
    scrollbar-color:#442222 #0a0a0a;
}
#binary-scroll::-webkit-scrollbar{
    height:4px;
}
#binary-scroll::-webkit-scrollbar-track{
    background:#0a0a0a;
}
#binary-scroll::-webkit-scrollbar-thumb{
    background:#553322;
    border-radius:2px;
}
#binary-scroll::-webkit-scrollbar-thumb:hover{
    background:#774433;
}

/* Classified block */
.classified-block{
    border:1px solid #664444;
    background:#221515;
    padding:14px;
}
.classified-title{
    color:#ffaaaa;
    font-size:11px;
    letter-spacing:2px;
    margin-bottom:10px;
    font-weight:normal;
}
.classified-table{
    width:100%;
    border-collapse:collapse;
}
.classified-table tr{
    border-bottom:1px solid #332222;
}
.classified-table tr:last-child{border-bottom:none}
.classified-table td{
    padding:5px 0;
    font-size:10px;
    vertical-align:top;
}
.classified-label{
    color:#bbb;
    width:120px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:9px;
}
.classified-value{
    color:#eecca8;
}

/* Footer */
.site-footer{
    text-align:center;
    padding:20px 0;
}
.footer-meta{
    display:flex;
    justify-content:center;
    gap:15px;
    font-size:9px;
    color:#aaa;
    margin-top:8px;
}

/* Responsive */
@media(max-width:600px){
    .site-container{padding:0 12px 30px}
    .tenet{flex-direction:column;gap:4px}
    .tenet-num{width:auto}
    .data-table td{padding:6px;font-size:10px}
    .chat-entry{font-size:10px}
    #candle-body{height:75px}
    .drip-4{height:40px}
    .drip-3{height:35px}
    #eye-text{font-size:16px;line-height:1.9}
    #eye-text p{margin-bottom:10px}
}