/* FONT */
@font-face {
    font-family: "SpecialElite";
    src: url("SpecialElite-Regular.ttf") format("truetype");
}

/* GLOBAL */
/* GLOBAL — Rusted + Dirty + Dithered */
body, button, input, textarea, #terminalOutput, #terminalInput {
    font-family: "SpecialElite", "Roboto Mono", monospace !important;
    margin:0;
    color:#d9e0c2;
    letter-spacing:0.4px;
    overflow:hidden;

    /* BASE very dark metal */
    background: #0b0c08;

    /* Remove linear-banding problems */
    background-image: none !important;
}

/* BACKGROUND LAYERS */
body::before {
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-3;

    /* DITHER / FINE NOISE */
    background:
        repeating-linear-gradient(
            0deg,
            rgba(0,0,0,0.22) 0px,
            rgba(0,0,0,0.22) 1px,
            rgba(0,0,0,0.18) 2px,
            rgba(0,0,0,0.18) 3px,
            rgba(0,0,0,0.20) 4px
        );

    opacity:0.35;
    mix-blend-mode:overlay;
}

body::after {
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-4;

    /* Heavy rust stains + grime */
    background:
        radial-gradient(circle at 20% 30%,  rgba(120,90,40,0.22), transparent 65%),
        radial-gradient(circle at 85% 75%, rgba(90,60,25,0.18), transparent 70%),
        radial-gradient(circle at 50% 110%, rgba(160,110,55,0.12), transparent 80%),
        repeating-linear-gradient(
            45deg,
            rgba(255,190,90,0.10) 0px,
            rgba(255,190,90,0.10) 5px,
            rgba(0,0,0,0.05) 10px
        );

    opacity:0.45;
    mix-blend-mode: multiply;
}


/* HEADER */
header {
    padding:6px 10px;
    background:
      linear-gradient(180deg, #1b1f17 0%, #0c0e09 50%, #050603 100%),
      repeating-linear-gradient(
        -35deg,
        rgba(255,255,210,0.05) 0px,
        rgba(0,0,0,0.15) 6px,
        rgba(0,0,0,0.3) 12px
      );
    border-bottom:2px solid #7f8b42;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.7), 0 4px 12px rgba(0,0,0,1);
    color:#cdd6a4;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:10px;
}

header strong { letter-spacing:1.6px; }
header .accent {
    color:#c0d56f;
    text-shadow:0 0 6px rgba(180,200,120,0.8);
}

/* MAIN LAYOUT */
#main {
    display:flex;
    gap:10px;
    padding:10px;
}

/* === FIX: VIEWPORT MUST BE FIXED SIZE, NOT FLEX-STRETCHED === */
#viewport {
    width: 350px !important;       /* LARGHEZZA FISSA */
    height: 197px !important;      /* 16:9 (350 × 0.5625) */
    flex-shrink: 0 !important;     /* NON SI STRINGE, NON SI ALLUNGA */
}


/* VIEWPORT — CRT metallico */
#viewport {
    border:2px solid #7f8b42;
    background:
      radial-gradient(circle at 50% 65%, rgba(50,50,35,0.90) 0%, #050503 70%),
      radial-gradient(circle at 0% 0%, rgba(120,80,40,0.08) 0%, transparent 55%),
      radial-gradient(circle at 100% 100%, rgba(220,200,150,0.06) 0%, transparent 60%);
    position:relative;
    overflow:hidden;
    box-shadow:
      inset 0 0 80px rgba(0,0,0,1),
      0 0 40px rgba(0,0,0,0.9);

    animation:sovietPulse 5s infinite ease-in-out;
}
@keyframes sovietPulse {
    0%,100% { filter:brightness(0.95); }
    50%     { filter:brightness(1.1); }
}

/* CRT SCANLINES HEAVY */
#viewport {
    position: relative;
    isolation: isolate; /* important: allow blend layers */
}



/* horizontal scanlines */
#viewport::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:20;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(0,0,0,0.35) 0px,
            rgba(0,0,0,0.35) 2px,
            rgba(0,0,0,0.0) 4px
        );
    mix-blend-mode:multiply;
    opacity:0.7;
}

/* CRT SUBPIXEL RGB MASK */
#viewport::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:15;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,0,0,0.17) 0px,
            rgba(255,0,0,0.17) 1px,
            rgba(0,255,0,0.17) 1px,
            rgba(0,255,0,0.17) 2px,
            rgba(0,0,255,0.17) 2px,
            rgba(0,0,255,0.17) 3px
        );
    mix-blend-mode:screen;
    opacity:0.25;
}

/* slight chromatic aberration */
#viewport canvas {
    filter: drop-shadow(1px 0px 0px rgba(255,0,0,0.18))
            drop-shadow(-1px 0px 0px rgba(0,120,255,0.18));
}



/* CRT GRID */
#viewport::before {
    content:"";
    position:absolute;
    inset:0;
    background:
      repeating-linear-gradient(
        to right,
        rgba(200,210,150,0.10) 0px,
        rgba(200,210,150,0.0) 2px,
        transparent 4px
      ),
      repeating-linear-gradient(
        to bottom,
        rgba(230,240,190,0.05) 0px,
        rgba(230,240,190,0.0) 1px,
        transparent 3px
      );
    opacity:0.45;
    mix-blend-mode:overlay;
    pointer-events:none;
}

/* CRT FLICKER */
#viewport::after {
    content:"";
    position:absolute;
    inset:-10%;
    background: conic-gradient(
      from 180deg,
      rgba(255,255,210,0.05),
      rgba(0,0,0,0.0) 25deg,
      rgba(255,255,210,0.10) 45deg,
      rgba(0,0,0,0.0) 120deg,
      rgba(255,255,210,0.08) 200deg,
      rgba(0,0,0,0.0) 260deg,
      rgba(255,255,210,0.05)
    );
    mix-blend-mode:soft-light;
    opacity:0.4;
    animation: crtSweep 6.5s infinite linear;
}
@keyframes crtSweep {
    0%   { transform:rotate(0deg); opacity:0.25; }
    40%  { opacity:0.55; }
    100% { transform:rotate(360deg); opacity:0.35; }
}

/* STATIC SECONDARY VIEWPORT */
#staticViewport {
    margin-top:8px;
    border:1px solid #4f5530;
    background:#070807;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.8);
}
#staticViewport img {
    width:100%;
    height:auto;
    display:block;
    opacity:0.8;
}

/* TERMINAL WRAPPER */
#terminalWrapper {
    flex:1;
    display:flex;
    flex-direction:column;
}

/* OUTPUT WINDOW */
#terminalOutput {
    flex:1;
    overflow-y:auto;
    border:1px solid #6f7548;
    padding:8px;
    background:
      radial-gradient(circle at 20% 0%, rgba(160,130,70,0.24) 0%, transparent 55%),
      radial-gradient(circle at 85% 100%, rgba(80,60,35,0.3) 0%, transparent 60%),
      linear-gradient(175deg, #11130f 0%, #090a07 60%, #13160f 100%);
    box-shadow:
      inset 0 0 35px #000,
      inset 0 0 90px rgba(18,20,11,0.9);
    color:#e7ebd2;
    font-size:13px;
    position:relative;
}

/* Grain */
#terminalOutput::before {
    content:"";
    position:absolute;
    inset:0;
    background:
      repeating-linear-gradient(
        to right,
        rgba(200,210,140,0.04) 0px,
        rgba(200,210,140,0.0) 2px,
        transparent 4px
      ),
      repeating-linear-gradient(
        to bottom,
        rgba(0,0,0,0.2) 0px,
        rgba(0,0,0,0.0) 1px,
        transparent 3px
      );
    opacity:0.22;
    mix-blend-mode:soft-light;
    pointer-events:none;
}

/* Glitch symbols */
#terminalOutput::after {
    content:"▚ ▞ ▚ ▞";
    position:absolute;
    bottom:6px;
    right:12px;
    color:rgba(150,160,100,0.45);
    font-size:11px;
    letter-spacing:3px;
    pointer-events:none;
}

/* SCROLLBAR */
#terminalOutput::-webkit-scrollbar { width:6px; }
#terminalOutput::-webkit-scrollbar-thumb {
    background:linear-gradient(180deg,#7f8b42,#444e24);
}

/* INPUT LINE */
.inputLine {
    display:flex;
    margin-top:4px;
}
.inputLine span {
    color:#c0d56f;
    margin-right:4px;
    text-shadow:0 0 6px rgba(180,200,120,0.9);
}

/* INPUT FIELD */
#terminalInput {
    flex:1;
    background:#0e100b;
    color:#e8f0d2;
    border:1px solid #6d7a43;
    padding:3px 5px;
    box-shadow:inset 0 0 10px #000;
}

/* Quick interference on focus */
#terminalInput:focus {
    outline:none;
    animation:x18Interference 0.22s steps(2, jump-start) 4;
}
@keyframes x18Interference {
    0%   { filter:contrast(1.6) brightness(1.3); }
    25%  { filter:contrast(0.7) brightness(0.7); }
    50%  { filter:contrast(2.0) brightness(1.6); }
    75%  { filter:contrast(0.9) brightness(0.8); }
    100% { filter:none; }
}

/* LOG COLORS */
.sys  { color:#d3dcae; text-shadow:0 0 6px rgba(200,210,150,0.9); }
.warn { color:#f6e29a; text-shadow:0 0 5px rgba(255,230,140,0.8); }
.err  { color:#ff8a6a; text-shadow:0 0 8px rgba(255,60,40,0.95); }

/* NOTES + INVENTORY + MAP BUTTONS */
#openNotesBtn,
#openInventoryBtn,
#openMapBtn {
    position:fixed;
    top:14px;
    right:14px;
    transform:translateX(calc(var(--btn-index,0) * -65px));

    padding:6px 10px;
    background:
      radial-gradient(circle at 30% 0%, rgba(180,200,120,0.25), transparent 55%),
      #151910;
    color:#d9e0c2;
    border:1px solid #7f8b42;
    border-radius:4px;
    cursor:pointer;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1px;
    box-shadow: inset 0 0 10px #000;
    z-index:9999;
}
#openNotesBtn   { --btn-index:0; }
#openInventoryBtn { --btn-index:1; }
#openMapBtn { --btn-index:2; }

#openNotesBtn:hover,
#openInventoryBtn:hover,
#openMapBtn:hover {
    background:#1b2015;
}

/* NOTES + INVENTORY windows */
#notesOverlay,
#inventoryOverlay,
#mapOverlay {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.85);
    z-index:9998;
    align-items:center;
    justify-content:center;
}

#notesWindow,
#inventoryWindow,
#mapOverlayContent {
    position:relative;
    background: #060705;
    border:2px solid #7f8b42;
    padding:14px;
    box-shadow: inset 0 0 40px rgba(0,0,0,1);
    width:70%;
    max-width:700px;
}

#notesWindow textarea {
    width:100%;
    height:200px;
    background:#0c0d0a;
    border:1px solid #7f8b42;
    color:#d9e0c2;
    padding:6px;
    resize:none;
}

/* Psy Pulse Effect — RIMANENTE */
#psyPulseEffect {
    position: fixed;
    inset: 0;
    pointer-events:none;
    mix-blend-mode:overlay;
    background:
      radial-gradient(circle at 50% 50%, rgba(255,0,70,0.18), transparent 70%);
    opacity:0;
    transition:opacity 0.2s;
}
#psyPulseEffect.active {
    opacity:0.45;
    animation: psyPulse 0.4s ease-out;
}
@keyframes psyPulse {
    0%   { filter:blur(0px); }
    50%  { filter:blur(3px); }
    100% { filter:blur(0px); }
}

/* RADIATION FLASH */
#radiationFlash {
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:0;
}
#radiationFlash.flash {
    animation:radFlash 0.4s ease-out;
}
@keyframes radFlash {
    0%   { background:radial-gradient(circle, rgba(255,240,160,0.35), transparent 70%); opacity:1; }
    100% { background:transparent; opacity:0; }
}

/* X-18 Distortion */
#x18Distortion {
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
      repeating-linear-gradient(to bottom, rgba(255,255,255,0.08) 0px, transparent 4px),
      repeating-linear-gradient(to right, rgba(0,0,0,0.4) 0px, transparent 6px);
    opacity:0;
    mix-blend-mode:soft-light;
    backdrop-filter:blur(0px);
    transition:opacity 0.15s ease-out, backdrop-filter 0.15s ease-out;
}
#x18Distortion.active {
    opacity:0.55;
    backdrop-filter:blur(2px);
}

/* Removed existing #diagHUD styling for new HUD. */

/* === GLOBAL DIRTY VIGNETTE OVERLAY === */
#screenVignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5000; /* sopra viewport, sotto map/inventory overlays */

    /* Vignettatura scura ai bordi */
    background:
        radial-gradient(circle at 50% 50%,
            rgba(0,0,0,0) 55%,
            rgba(0,0,0,0.35) 100%);

    /* Strato di sporco / graffi */
    mix-blend-mode: multiply;
    opacity: 0.55;
}

/* Strato aggiuntivo di noise/grain */
#screenVignette::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        url('assets/noise.png') repeat,
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.03), transparent 60%),
        linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 70%);

    opacity: 0.25;
    mix-blend-mode: overlay;
}

/* =============================
   GAS MASK BROKEN VISOR OVERLAY
   ============================= */
#gasMaskOverlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5000;

    /* Forma ovale della lente */
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%,
        black 60%,
        transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%,
        black 60%,
        transparent 100%);

    /* Base vignetta scura */
    background:
        radial-gradient(circle at 50% 50%,
            rgba(0,0,0,0.0) 45%,
            rgba(0,0,0,0.35) 80%,
            rgba(0,0,0,0.75) 100%);
}

/* ===== SCRATCHES + CRACK ===== */
#gasMaskOverlay::before {
    content:"";
    position:absolute;
    inset:0;

    /* Crepa principale */
    background:
        /* crack (linea frattura) */
        repeating-linear-gradient(
            115deg,
            rgba(255,255,255,0.20) 0px,
            rgba(255,255,255,0.12) 1px,
            transparent 3px
        ),

        /* graffi sparsi */
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,0.04) 0px,
            rgba(255,255,255,0.03) 2px,
            transparent 6px
        ),

        /* graffi verticali */
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.05) 0px,
            rgba(255,255,255,0.02) 1px,
            transparent 4px
        );

    opacity: 0.45;
    mix-blend-mode: screen;
}

/* ===== CONDENSA / SPORCO ===== */
#gasMaskOverlay::after {
    content:"";
    position:absolute;
    inset:0;

    background:
        radial-gradient(circle at 30% 20%,
            rgba(255,255,255,0.05) 0%,
            transparent 60%),
        radial-gradient(circle at 70% 80%,
            rgba(255,255,255,0.03) 0%,
            transparent 70%),
        radial-gradient(circle at 50% 50%,
            rgba(255,255,255,0.02) 0%,
            transparent 80%),

        /* polvere/noise */
        url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAABL0lEQVR4nO3YwQ3CMAwF0FXs//86uSUk0IgzuS9yh2YqzM0gc3K6En0x1Mh0dJGZve+X776BF3/f6/3u7P7AnbcW2CYwiVQiFUKhVCIVQqFUAhWD4r0zp+PwPA9vywgqakdUSHcauD1ynjUTduVdJN9WewtG/XAIN5e8wZsM+dAf5BgC984wgNPnFTig84yA1OcZOKD3jIC059k4oPeMgLTnGTig94yAtufZOKD3jIC059k4oPeMgLTnHbjr7DyfitjjsPFnvx6b+piKiqf3L2nwVRoFUKhVCIVQqFUAhVCIVQqFUAhVIJ/gX3YeliYg+6TSLQAAAABJRU5ErkJggg==');
    
    background-size: cover;
    opacity: 0.25;
    mix-blend-mode: multiply;
}


/* MAIN MENU */
#mainMenu {
    position: fixed;
    inset: 0;
    background: rgba(5, 6, 4, 0.95);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: "SpecialElite", monospace;
}

#menuWindow {
    text-align: center;
    background: #0b0d08;
    border: 2px solid #7f8b42;
    padding: 20px 40px;
    box-shadow: inset 0 0 30px #000;
}

#menuWindow h1 {
    color: #cfd9a6;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.menuBtn {
    display: block;
    width: 220px;
    margin: 10px auto;
    padding: 10px;
    background: #1c2013;
    border: 1px solid #7f8b42;
    color: #d6e2ba;
    cursor: pointer;
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.menuBtn:hover {
    background: #252c18;
}

.menuBtn.small {
    width: 160px;
    font-size: 14px;
}

/* SUBMENUS */
.submenu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #090a07;
    border: 1px solid #7f8b42;
    padding: 20px;
    text-align: center;
    display: none;
}
.submenu h2 {
    color: #d6e2ba;
}
.submenu p {
    color: #b7c4a0;
}


/* FIX HUD RAD/PSY */
#diagHUD {
    position:fixed !important;
    bottom:10px !important;
    left:10px !important;

    z-index: 200000 !important; /* sopra TUTTO */

    font-size:16px !important;
    color:#cde6b5 !important;

    background:rgba(10,12,8,0.85) !important;
    padding:10px 14px !important;
    border:1px solid #7f8b42 !important;
    border-radius:4px !important;

    white-space: pre !important; /* FONDAMENTALE */

    min-width: 240px !important;
    min-height: 80px !important;

    text-shadow:0 0 4px rgba(150,180,120,0.5) !important;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.9) !important;

    pointer-events:none !important;
}


#pdaFeed {
    margin-top: 8px;
    padding: 10px 14px;
    width: 160px;

    background: rgba(10,12,8,0.85);
    border: 1px solid #7f8b42;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.7);

    color: #d8e9c2;
    font-family: "SpecialElite", monospace;
}

#pdaLocName {
    font-size: 16px;
    font-weight: bold;
    color: #f0ffdd;
    margin-bottom: 2px;
    letter-spacing: 1px;
}

#pdaLocDesc {
    font-size: 12px;
    color: #c5d1b2;
    opacity: 0.9;
    margin-bottom: 8px;
}

#pdaMessage {
    font-size: 12px;
    color: #9fb190;
    opacity: 0.95;
    white-space: pre-line;
}

#inventoryList {
    list-style:none;
    padding:0;
    margin:0;
}

.invSlot {
    display:flex;
    gap:10px;
    margin-bottom:8px;
    background:rgba(10,12,8,0.7);
    padding:8px;
    border:1px solid #7f8b42;
    border-radius:4px;
}

.invIcon {
    width:64px;
    height:64px;
    object-fit:contain;
    border:1px solid #7f8b42;
    background:#000;
}

.invInfo {
    font-family:"SpecialElite", monospace;
    color:#e6f2c9;
    font-size:14px;
}

#statusHUD {
    position: fixed;
    left: 14px;
    bottom: 14px;
    min-width: 210px;
    min-height: 40px;
    font-size: 16px;
    color: #e2f0c2;
    background: rgba(18, 22, 15, 0.88);
    border: 1.5px solid #89aa68;
    border-radius: 4px;
    padding: 10px 14px;
    pointer-events: none;
    white-space: pre-line;
    z-index: 10000;
    box-shadow: 0 0 12px #223a10b0 inset;
}