/* =============================================
   BASE
   ============================================= */
body {
    margin: 0; overflow: hidden;
    background-color: #060808;
    font-family: 'Courier New', Courier, monospace;
    -webkit-font-smoothing: none !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeSpeed !important;
}

/* =============================================
   MINIMAL IN-GAME HUD
   ============================================= */
#ui {
    position: fixed; top: 18px; left: 22px;
    font-size: 13px; letter-spacing: 3px;
    color: rgba(200,175,110,0.6);
    pointer-events: none; z-index: 5; text-transform: uppercase;
}
#timer-ui {
    position: fixed; top: 18px; right: 22px;
    font-size: 13px; letter-spacing: 3px;
    color: rgba(200,175,110,0.45);
    pointer-events: none; z-index: 5;
}

/* Stamina — vertical bar, left side */
#stamina-container {
    position: fixed; left: 18px; top: 50%; transform: translateY(-50%);
    width: 5px; height: 200px;
    background: rgba(5,4,2,0.6);
    border: 1px solid rgba(80,60,20,0.3);
    z-index: 5; pointer-events: none; border-radius: 3px;
}
#stamina-bar {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, #5a4200, #d4af37, #ffe060);
    transition: height 0.1s linear, background 0.3s;
    border-radius: 3px;
}
@keyframes exhaust-pulse {
    0%,100% { box-shadow: 0 0 0px rgba(180,0,0,0); }
    50%      { box-shadow: 0 0 10px rgba(220,0,0,0.8), 0 0 4px rgba(255,60,0,0.5); }
}
#stamina-container.exhausted { animation: exhaust-pulse 0.45s ease-in-out infinite; }

/* Crosshair — centered dot */
#crosshair {
    position: fixed; top: 50%; left: 50%;
    width: 4px; height: 4px;
    background: rgba(230,210,170,0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; z-index: 5;
    box-shadow: 0 0 6px rgba(0,0,0,0.9);
    transition: background 0.12s, transform 0.12s, box-shadow 0.12s;
}
#crosshair.nearby {
    background: rgba(0,238,255,0.95);
    transform: translate(-50%, -50%) scale(2.5);
    box-shadow: 0 0 10px rgba(0,238,255,0.7), 0 0 20px rgba(0,238,255,0.3);
}

/* Radar */
#radar {
    position: fixed; bottom: 22px; right: 22px;
    width: 200px; height: 200px;
    background: rgba(2,5,3,0.72);
    border: 1px solid rgba(50,80,40,0.35);
    border-radius: 50%;
    z-index: 5; pointer-events: none;
    image-rendering: pixelated !important;
}

/* Flashlight indicator — top centre */
#flashlight-indicator {
    position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 6px;
    font-family: 'Courier New', monospace;
    font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
    color: rgba(200,180,100,0.5);
    pointer-events: none; z-index: 5;
    transition: color 0.2s, text-shadow 0.2s;
}
#flashlight-indicator.off {
    color: rgba(120,80,60,0.35);
    text-decoration: line-through;
}
#flash-icon { font-size: 14px; }

/* Interact prompt */
#interact-prompt {
    position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%);
    display: none; z-index: 10; pointer-events: none;
    font-family: 'Courier New', monospace;
    font-size: 13px; letter-spacing: 5px;
    color: rgba(180,160,100,0.85); text-transform: uppercase;
    background: rgba(0,0,0,0.45);
    padding: 8px 20px; border-radius: 2px;
    border: 1px solid rgba(100,80,30,0.3);
}

/* Fade to black */
#fade-black {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; opacity: 0; pointer-events: none;
    z-index: 105; transition: opacity 3s ease-in-out;
}

/* =============================================
   PUZZLE TRACKER HUD
   Old, worn, stone-finish status display.
   Lives bottom-left. 6 indicator slots.
   ============================================= */
#puzzle-tracker {
    position: fixed; bottom: 22px; left: 18px;
    width: 136px;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(0,0,0,0.04) 3px,
            rgba(0,0,0,0.04) 4px
        ),
        linear-gradient(160deg, #2a2318 0%, #1a1510 40%, #211c14 70%, #1a1208 100%);
    border: 2px solid #3a2e1a;
    border-top: 3px solid #4a3820;
    border-bottom: 3px solid #0e0a06;
    border-radius: 3px 3px 2px 2px;
    box-shadow:
        0 4px 18px rgba(0,0,0,0.9),
        inset 0 1px 0 rgba(255,220,100,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.4);
    z-index: 5; pointer-events: none;
    overflow: hidden;
    padding: 6px 8px 8px;
}

#tracker-label {
    font-family: 'Courier New', monospace;
    font-size: 8px; letter-spacing: 4px;
    color: rgba(160,130,60,0.55);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 7px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(80,60,20,0.3);
}

#tracker-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

/* Each puzzle slot */
.tslot {
    display: flex; flex-direction: column;
    align-items: center; gap: 3px;
    padding: 4px 2px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(60,50,25,0.4);
    border-radius: 2px;
}

/* The indicator pip — red/pulsing when unsolved */
.tslot-pip {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ff4422, #880808);
    box-shadow: 0 0 6px rgba(255,30,0,0.7), 0 0 2px rgba(255,80,0,0.4);
    animation: pip-flash 1.8s ease-in-out infinite;
}

/* Slot number label */
.tslot-num {
    font-family: 'Courier New', monospace;
    font-size: 7px; letter-spacing: 1px;
    color: rgba(140,110,50,0.5);
}

/* Solved state — pip goes dark/off */
.tslot.solved .tslot-pip {
    background: radial-gradient(circle at 35% 35%, #1a1a14, #0a0a08);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
    animation: none;
}
.tslot.solved .tslot-num {
    color: rgba(80,100,60,0.4);
    text-decoration: line-through;
}

/* Pip flash animation — irregular, like a dying LED */
@keyframes pip-flash {
    0%   { opacity: 1; }
    8%   { opacity: 0.3; }
    12%  { opacity: 1; }
    50%  { opacity: 0.9; }
    55%  { opacity: 0.15; }
    58%  { opacity: 0.9; }
    80%  { opacity: 1; }
    85%  { opacity: 0.5; }
    88%  { opacity: 1; }
    100% { opacity: 0.85; }
}

/* Stone crack texture overlay (pure CSS) */
#tracker-crack-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    background:
        /* diagonal hairline cracks */
        linear-gradient(128deg, transparent 30%, rgba(0,0,0,0.12) 30.5%, transparent 31%),
        linear-gradient(52deg,  transparent 60%, rgba(255,255,255,0.03) 60.5%, transparent 61%),
        linear-gradient(170deg, transparent 50%, rgba(0,0,0,0.08) 50.5%, transparent 51%);
    border-radius: inherit;
}

/* Noise scan line — sweeps slowly to suggest bad signal */
#tracker-noise-line {
    position: absolute; left: 0; width: 100%; height: 2px;
    background: rgba(200,160,50,0.06);
    animation: tracker-scan 6s linear infinite;
    pointer-events: none;
}
@keyframes tracker-scan {
    0%   { top: 0%; opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 0.6; }
    100% { top: 100%; opacity: 0; }
}

/* =============================================
   PUZZLE OVERLAY
   data-ptype drives colour theming.
   ============================================= */
#puzzle-overlay {
    display: none;
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 500;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(3px);
}
#puzzle-overlay.active {
    display: flex !important;
}

/* Entrance animation — rises from below */
@keyframes puzzle-rise {
    0%   { transform: translateY(40px) scale(0.97); opacity: 0; }
    60%  { transform: translateY(-4px) scale(1.005); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

#puzzle-box {
    position: relative;
    width: 520px;
    display: flex; flex-direction: column;
    animation: puzzle-rise 0.38s cubic-bezier(0.22,0.9,0.36,1) forwards;
    /* Worn stone base */
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 7px,
            rgba(0,0,0,0.03) 7px,
            rgba(0,0,0,0.03) 8px
        ),
        linear-gradient(175deg, #2e2820 0%, #1c1812 35%, #231e14 65%, #1a1610 100%);
    border: 2px solid #3a3020;
    border-top: 4px solid #5a4a28;
    border-bottom: 4px solid #0e0c08;
    box-shadow:
        0 30px 80px rgba(0,0,0,0.95),
        inset 0 1px 0 rgba(255,220,100,0.08),
        inset 0 -2px 0 rgba(0,0,0,0.5);
    border-radius: 3px;
    overflow: hidden;
    font-family: 'Courier New', monospace;
}

/* ---- HEADER ---- */
#puzzle-header {
    display: flex; align-items: stretch;
    border-bottom: 2px solid rgba(0,0,0,0.5);
    min-height: 38px;
    background: linear-gradient(180deg, #1a1510 0%, #120f0a 100%);
}
#puzzle-stone-left,
#puzzle-stone-right {
    width: 14px; flex-shrink: 0;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.025) 0px,
            rgba(255,255,255,0.025) 1px,
            transparent 1px,
            transparent 5px
        ),
        #151210;
    border-right: 1px solid rgba(0,0,0,0.4);
}
#puzzle-stone-right { border-right: none; border-left: 1px solid rgba(0,0,0,0.4); }

#puzzle-title-wrap {
    flex: 1; display: flex; align-items: center;
    gap: 10px; padding: 0 14px;
}

#puzzle-type-badge {
    font-size: 9px; font-weight: 900; letter-spacing: 3px;
    padding: 3px 7px;
    border-radius: 2px;
    border: 1px solid;
    /* colour set per ptype below */
}
#puzzle-title {
    font-size: 10px; letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(180,160,100,0.7);
}

/* ---- CANVAS WRAP ---- */
#puzzle-canvas-wrap {
    position: relative;
    line-height: 0; /* removes gap below canvas */
}
#puzzle-canvas {
    display: block;
    width: 100%; height: auto;
    image-rendering: pixelated;
    cursor: pointer;
    user-select: none; -webkit-user-select: none;
}

/* Screen grime — semi-opaque scratches layered over canvas */
#puzzle-screen-grime {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 2;
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 2px,
            rgba(0,0,0,0.06) 2px,
            rgba(0,0,0,0.06) 3px
        ),
        radial-gradient(ellipse at 20% 30%, rgba(255,255,200,0.03) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 70%, rgba(255,255,200,0.02) 0%, transparent 50%);
}

/* Scanlines over the canvas */
#puzzle-scanlines {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 3;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 1px,
        rgba(0,0,0,0.18) 1px,
        rgba(0,0,0,0.18) 2px
    );
}

/* ---- FOOTER ---- */
#puzzle-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 14px;
    border-top: 2px solid rgba(0,0,0,0.5);
    background: linear-gradient(180deg, #120f0a 0%, #0e0c08 100%);
    min-height: 32px;
}
.footer-rivet {
    width: 7px; height: 7px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #4a3c20, #1a1408);
    border: 1px solid rgba(0,0,0,0.6);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.08);
    flex-shrink: 0;
}
#puzzle-status {
    font-size: 9px; letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(140,120,60,0.6);
    text-align: center; flex: 1;
}

/* =============================================
   PER-PUZZLE-TYPE THEMING
   Uses #puzzle-overlay[data-ptype="..."] selector.
   ============================================= */

/* ---- POWER ROUTING — electric cyan/slate ---- */
#puzzle-overlay[data-ptype="power"] #puzzle-box {
    border-top-color: #1a4a5a;
    box-shadow: 0 30px 80px rgba(0,0,0,0.95), 0 0 30px rgba(0,150,200,0.08), inset 0 1px 0 rgba(0,200,255,0.06);
}
#puzzle-overlay[data-ptype="power"] #puzzle-type-badge {
    color: #00ccff; border-color: #004455; background: rgba(0,60,80,0.6);
}
#puzzle-overlay[data-ptype="power"] #puzzle-title { color: rgba(0,180,220,0.6); }
#puzzle-overlay[data-ptype="power"] #puzzle-status { color: rgba(0,160,200,0.55); }
#puzzle-overlay[data-ptype="power"] #puzzle-footer { border-top-color: rgba(0,80,120,0.4); }

/* ---- FUSE BOX — amber/rust industrial ---- */
#puzzle-overlay[data-ptype="fuse"] #puzzle-box {
    border-top-color: #5a3a0a;
    box-shadow: 0 30px 80px rgba(0,0,0,0.95), 0 0 30px rgba(180,100,0,0.08), inset 0 1px 0 rgba(220,140,0,0.06);
    background:
        repeating-linear-gradient(
            90deg, transparent, transparent 7px,
            rgba(0,0,0,0.03) 7px, rgba(0,0,0,0.03) 8px
        ),
        linear-gradient(175deg, #2e2014 0%, #1e160a 35%, #251c0e 65%, #1c1408 100%);
}
#puzzle-overlay[data-ptype="fuse"] #puzzle-type-badge {
    color: #ffaa00; border-color: #553800; background: rgba(60,30,0,0.6);
}
#puzzle-overlay[data-ptype="fuse"] #puzzle-title { color: rgba(200,140,40,0.6); }
#puzzle-overlay[data-ptype="fuse"] #puzzle-status { color: rgba(180,120,30,0.55); }
#puzzle-overlay[data-ptype="fuse"] #puzzle-footer { border-top-color: rgba(100,60,0,0.4); }

/* ---- SEQUENCE OVERRIDE — deep red/military ---- */
#puzzle-overlay[data-ptype="sequence"] #puzzle-box {
    border-top-color: #4a0a0a;
    box-shadow: 0 30px 80px rgba(0,0,0,0.95), 0 0 30px rgba(180,0,0,0.08), inset 0 1px 0 rgba(220,30,0,0.05);
    background:
        repeating-linear-gradient(
            90deg, transparent, transparent 7px,
            rgba(0,0,0,0.03) 7px, rgba(0,0,0,0.03) 8px
        ),
        linear-gradient(175deg, #281414 0%, #180c0c 35%, #1e1010 65%, #160a0a 100%);
}
#puzzle-overlay[data-ptype="sequence"] #puzzle-type-badge {
    color: #ff3333; border-color: #550000; background: rgba(50,0,0,0.6);
}
#puzzle-overlay[data-ptype="sequence"] #puzzle-title { color: rgba(180,60,40,0.6); }
#puzzle-overlay[data-ptype="sequence"] #puzzle-status { color: rgba(160,50,30,0.55); }
#puzzle-overlay[data-ptype="sequence"] #puzzle-footer { border-top-color: rgba(100,0,0,0.4); }

/* =============================================
   MAIN MENU — all original styles preserved
   ============================================= */
.clunky-panel {
    background: linear-gradient(135deg, #5e4835 0%, #3e2e21 50%, #292017 100%);
    border: 4px ridge #8b6b4a; color: #d4c4a8;
    text-shadow: 1px 1px 2px #000;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.8), inset 2px 2px 5px rgba(255,255,255,0.05);
    padding: 8px 15px; border-radius: 2px;
}
:root {
    --title-font: 'Courier New', monospace;
    --clunky-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect x='12' y='12' width='8' height='12' fill='%233e2e21' stroke='%23110d0a' stroke-width='1'/%3E%3Cpath d='M16 2 L20 12 L12 12 Z' fill='%238b6b4a' stroke='%23110d0a'/%3E%3Crect x='10' y='24' width='12' height='4' rx='1' fill='%235e4835'/%3E%3Ccircle cx='16' cy='26' r='1' fill='%2300eeff'/%3E%3C/svg%3E") 16 2, auto;
}
#main-ui {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    cursor: var(--clunky-cursor); padding: 20px; box-sizing: border-box;
    background-image: radial-gradient(circle at center, rgba(62,46,33,0.2) 0%, #060808 100%),
        repeating-linear-gradient(rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 1px, transparent 1px, transparent 4px);
    backdrop-filter: blur(10px);
}
.grid-container {
    display: grid; grid-template-columns: 300px minmax(400px,600px) 300px;
    gap: 25px; animation: slam 0.5s cubic-bezier(0.17,0.89,0.32,1.28) forwards;
    max-width: 1300px; width: 100%;
}
@keyframes screen-shake {
    0%{transform:translateY(0)} 25%{transform:translateY(-4px)}
    50%{transform:translateY(3px)} 75%{transform:translateY(-1px)} 100%{transform:translateY(0)}
}
.shake-active { animation: screen-shake 0.2s ease-in-out; }
@keyframes slam { 0%{transform:scale(1.1);opacity:0} 100%{transform:scale(1);opacity:1} }
.panel {
    background: linear-gradient(145deg, #4e3c2d, #292017);
    border: 3px solid #1a1511; border-top: 3px solid #8b6b4a;
    color: #d4c4a8; padding: 25px; border-radius: 15px;
    box-shadow: 15px 15px 35px rgba(0,0,0,0.8), inset 1px 1px 3px rgba(255,255,255,0.1);
}
.header-title {
    color:#d4af37; font-weight:bold;
    border-bottom:2px solid rgba(139,107,74,0.3);
    margin-bottom:15px; padding-bottom:8px;
    text-transform:uppercase; font-size:1em; letter-spacing:1px;
}
.center-col { display:flex; flex-direction:column; gap:20px; text-align:center; }
h1 { font-family:var(--title-font); font-size:3.8em; margin:0; text-shadow:0 4px 10px #000; letter-spacing:-1px; font-weight:900; }
.version { font-size:0.8em; color:#5e4835; margin-bottom:10px; font-weight:bold; }
.lore-box { font-style:italic; background:rgba(17,13,10,0.6); border-radius:10px; border:2px solid #3e2e21; padding:15px; color:#d4c4a8; line-height:1.5; }
.input-container { position:relative; width:100%; height:64px; background:#0c121a; border:3px ridge #8b6b4a; border-radius:10px; box-shadow:inset 0 0 15px rgba(0,0,0,0.8); overflow:hidden; }
.input-plate { position:absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; background:transparent; border:none; color:#00eeff; padding:15px; font-size:1.5em; text-align:center; outline:none; cursor:var(--clunky-cursor); font-family:var(--title-font); font-weight:900; z-index:2; caret-color:transparent; }
.input-bg { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center; font-family:var(--title-font); font-weight:900; font-size:1.5em; color:rgba(0,238,255,0.3); pointer-events:none; z-index:1; }
.dots span { animation:blink 1.4s infinite both; font-size:1.5em; }
.dots span:nth-child(2){animation-delay:0.2s}
.dots span:nth-child(3){animation-delay:0.4s}
@keyframes blink { 0%{opacity:0.2} 20%{opacity:1} 100%{opacity:0.2} }
.hazard-wrap { background:repeating-linear-gradient(45deg,#d4af37,#d4af37 10px,#110d0a 10px,#110d0a 20px); padding:5px; border-radius:12px; overflow:hidden; }
button { width:100%; background:linear-gradient(to bottom,#8b6b4a,#5e4835); color:#110d0a; border:none; border-bottom:6px solid #3e2e21; border-radius:8px; padding:22px; font-size:1.6em; font-weight:900; text-transform:uppercase; cursor:var(--clunky-cursor); text-shadow:1px 1px 0 rgba(255,255,255,0.1); transition:all 0.05s; }
button:hover { background:linear-gradient(to bottom,#d4af37,#8b6b4a); filter:brightness(1.1); }
button:active { transform:translateY(6px); border-bottom:0px solid #3e2e21; box-shadow:inset 0 5px 15px rgba(0,0,0,0.6); }
@keyframes slow-tilt { 0%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)} 100%{transform:rotate(-4deg)} }
.checklist { background:#e0d8c0; color:#292017; padding:18px; border-radius:4px 4px 15px 15px; border-top:8px solid #8b6b4a; font-weight:bold; box-shadow:0 10px 20px rgba(0,0,0,0.5); animation:slow-tilt 5s ease-in-out infinite; transform-origin:top center; }
.key { background:#110d0a; border:2px solid #3e2e21; border-radius:6px; padding:6px; color:#d4af37; }
.setting-row { display:flex; justify-content:space-between; margin-bottom:12px; align-items:center; font-size:0.9em; text-transform:uppercase; }
.right-col { display:flex; flex-direction:column; gap:20px; }
.stat-box { background:rgba(17,13,10,0.8); border:1px solid #3e2e21; border-radius:10px; padding:12px; text-align:center; }
.stat-val { font-size:1.5em; color:#d4af37; display:block; margin-top:5px; font-weight:bold; }
.archives { height:160px; overflow-y:auto; background:#0c121a; border-radius:10px; border:2px inset #110d0a; padding:10px; }

/* =============================================
   WIN / DEATH SCREENS — original styles
   ============================================= */
#win-screen { display:none; background:rgba(5,6,3,0.88); position:absolute; top:0; left:0; width:100%; height:100%; align-items:center; justify-content:center; opacity:0; transition:opacity 3s ease-in-out; z-index:110; flex-direction:column; }
.overlay-box { background:linear-gradient(135deg,#3a2e1e 0%,#1e1810 100%); border:6px ridge #6b5030; padding:40px 60px; text-align:center; color:#d4c4a8; }
#death-screen-ui { display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:9999; overflow:hidden; background-color:#030001; color:#cc0000; font-family:'Courier New',monospace; cursor:crosshair; }
#death-screen-ui .void-bg { position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(circle at center,#1a0202 0%,#010000 100%); animation:pulse-bg 6s infinite alternate ease-in-out; z-index:0; }
@keyframes pulse-bg { 0%{transform:scale(1);opacity:0.9} 100%{transform:scale(1.04);opacity:1} }
#death-screen-ui .scanlines { position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(rgba(0,0,0,0) 50%,rgba(0,0,0,0.28) 50%); background-size:100% 3px; pointer-events:none; z-index:10; box-shadow:inset 0 0 140px rgba(0,0,0,0.98); }
#death-screen-ui .death-container { position:relative; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; }
#death-screen-ui h1 { font-size:6em; margin:0 0 15px 0; letter-spacing:-2px; text-align:center; text-shadow:4px 4px 22px rgba(255,0,0,0.9),-2px -2px 12px rgba(100,0,0,0.9); animation:power-flicker 3s infinite; font-weight:900; color:#ff1a1a; }
@keyframes power-flicker {
    0%,19.9%,22%,62.9%,64%,64.9%,66%,100%{opacity:1;color:#ff1a1a;transform:translate(0,0);}
    20%,21.9%{opacity:0.3;color:#4a0000;transform:translate(-2px,1px);}
    63%,63.9%{opacity:0.5;color:#6a0000;transform:translate(2px,-1px);}
    65%,65.9%{opacity:0.2;color:#3a0000;transform:translate(-1px,2px);}
}
#death-screen-ui .corrupted-panel { background:linear-gradient(145deg,#280808,#0e0101); border:3px solid #180404; border-top:4px solid #620606; padding:35px 45px; border-radius:12px; width:450px; box-shadow:0 25px 50px rgba(0,0,0,0.98),inset 0 0 20px rgba(255,0,0,0.04); position:relative; }
#death-screen-ui .corrupted-panel::before { content:''; position:absolute; top:-4px; left:10%; width:80%; height:4px; background:repeating-linear-gradient(90deg,#990000,#990000 10px,#3a0000 10px,#3a0000 20px); border-radius:4px 4px 0 0; opacity:0.6; }
#death-screen-ui .post-mortem-box { background:rgba(10,1,1,0.92); padding:25px; border-radius:4px 4px 15px 15px; border-top:6px solid #550404; box-shadow:0 15px 25px rgba(0,0,0,0.9),inset 0 0 12px rgba(60,0,0,0.5); animation:slow-tilt 7s ease-in-out infinite; transform-origin:top center; margin-bottom:35px; border-left:1px solid #220000; border-right:1px solid #220000; border-bottom:1px solid #220000; }
@keyframes slow-tilt { 0%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)} 100%{transform:rotate(-2deg)} }
#death-screen-ui .header-title { color:#ff3333; font-weight:bold; border-bottom:2px dashed rgba(180,0,0,0.4); margin-bottom:20px; padding-bottom:10px; text-transform:uppercase; font-size:1.1em; letter-spacing:2px; text-align:center; }
#death-screen-ui .setting-row { display:flex; justify-content:space-between; margin-bottom:15px; align-items:center; font-size:0.95em; font-weight:bold; color:#993333; text-transform:uppercase; }
#death-screen-ui .stat-val { font-size:1.4em; color:#ffbbbb; text-shadow:0 0 8px rgba(255,50,50,0.5); font-weight:900; }
#death-screen-ui button { width:100%; background:linear-gradient(to bottom,#6a0000,#380000); color:#0a0000; border:2px solid #180000; border-bottom:6px solid #1e0000; border-radius:8px; padding:20px; font-size:1.5em; font-weight:900; text-transform:uppercase; cursor:crosshair; text-shadow:1px 1px 0 rgba(255,80,80,0.2); transition:all 0.1s ease; letter-spacing:1px; font-family:'Courier New',monospace; }
#death-screen-ui button:hover { background:linear-gradient(to bottom,#880000,#4a0000); box-shadow:0 0 15px rgba(255,0,0,0.35); }
#death-screen-ui button:active { transform:translateY(6px); border-bottom:0; box-shadow:inset 0 6px 15px rgba(0,0,0,0.8); }