body {
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: monospace;
    overflow: hidden;
}

/* MAIN CONTAINER BACKGROUND */
#interface-container {
    background-image: url('../img/bg_3.png'); 
    width: 100%;
    max-width: 640px;  
    aspect-ratio: 4 / 3;
    height: auto; 
    background-size: cover;
    background-position: center;
    position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* STYLES FOR INVISIBLE BUTTONS (HOTSPOTS) */
.hotspot {
    position: absolute;
    cursor: pointer;
    z-index: 10;
}

/* --- ACTIVE HIGHLIGHT EFFECT  --- */
.hotspot.active-hotspot {
    /* Semitransparent yellow overlay */
    background-color: rgba(255, 255, 0, 0.2); 
    /* Mixing mode - lightens up whats under */
    mix-blend-mode: color-dodge; 
    /* Light frame for visibility */
    box-shadow: 0 0 5px rgba(255, 255, 0, 0.4), inset 0 0 5px rgba(255, 255, 0, 0.4);
}

/* DEBUG MODE FIELDS CLASS */
.debug-visible {
    background-color: rgba(255, 0, 0, 0.3);
    border: 1px solid red;
}

/* --- BUTTON POSITIONS (Twoje oryginalne pozycje) --- */

/* SPECIAL BUTTONS */
#btn-st { top: 7.5%; left: 2%; width: 24%; height: 6%; }
#btn-pe { top: 14.4%; left: 2%; width: 24%; height: 6%; }
#btn-en { top: 21.3%; left: 2%; width: 24%; height: 6%; }
#btn-ch { top: 28.2%; left: 2%; width: 24%; height: 6%; }
#btn-in { top: 35.1%; left: 2%; width: 24%; height: 6%; }
#btn-ag { top: 42.0%; left: 2%; width: 24%; height: 6%; }
#btn-lk { top: 48.9%; left: 2%; width: 24%; height: 6%; }

/* LEVEL/EXP/NEXT LEVEL */
#btn-level { top: 58%; left: 4%; width: 20.8%; height: 2.2%; }
#btn-exp { top: 60.2%; left: 4%; width: 20.8%; height: 2.2%; }
#btn-next-level { top: 62.5%; left: 4%; width: 20.8%; height: 2.2%; }

/* PERKS PANEL */
#btn-perks { top: 69%; left: 5%; width: 13%; height: 5%; }
#btn-traits{ top: 75%; left: 5%; width: 45%; height: 17%; }
#btn-skilled { top: 93.2%; left: 5%; width: 45%; height: 2.3%; }
#btn-good-natured { top: 96%; left: 5%; width: 45%; height: 2.3%; }
#btn-karma{ top: 69%; left: 21%; width: 13%; height: 5%; }
#btn-kills{ top: 69%; left: 37%; width: 13%; height: 5%; }

/* HIT POINTS + STATUS */
#btn-hit-points { top: 8.9%; left: 30%; width: 18%; height: 2.75%; }
#btn-poisoned { top: 11.65%; left: 30%; width: 18%; height: 2.75%; }
#btn-radiated { top: 14.4%; left: 30%; width: 18%; height: 2.75%; }
#btn-eyedmg { top: 17.15%; left: 30%; width: 18%; height: 2.75%; }
#btn-crip-right-arm { top: 19.9%; left: 30%; width: 18%; height: 2.75%; }
#btn-crip-left-arm { top: 22.65%; left: 30%; width: 18%; height: 2.75%; }
#btn-crip-right-leg { top: 25.4%; left: 30%; width: 18%; height: 2.75%; }
#btn-crip-left-leg { top: 28.15%; left: 30%; width: 18%; height: 2.75%; }

/* DERIVED STATS */
#btn-armor-class   { top: 36.8%; left: 30%; width: 19%; height: 2.55%; }
#btn-action-points { top: 39.55%; left: 30%; width: 19%; height: 2.55%; }
#btn-carry-weight  { top: 42.3%;  left: 30%; width: 19%; height: 2.55%; }
#btn-melee-damage  { top: 45.05%; left: 30%; width: 19%; height: 2.55%; }
#btn-damage-res    { top: 47.8%;  left: 30%; width: 19%; height: 2.55%; }
#btn-poison-res    { top: 50.55%; left: 30%; width: 19%; height: 2.55%; }
#btn-rad-res       { top: 53.3%;  left: 30%; width: 19%; height: 2.55%; }
#btn-sequence      { top: 56.05%; left: 30%; width: 19%; height: 2.55%; }
#btn-healing-rate  { top: 58.8%;  left: 30%; width: 19%; height: 2.55%; }
#btn-crit-chance   { top: 61.55%; left: 30%; width: 19%; height: 2.55%; }

/* SKILLS (right panel) */
#btn-skills         { top: 1.0%;   left: 59%; width: 35%; height: 4%; }
#btn-small-guns     { top: 5.3%;   left: 59%; width: 35%; height: 2.2%; }
#btn-big-guns       { top: 7.61%;  left: 59%; width: 35%; height: 2.2%; }
#btn-energy-weapons { top: 9.91%;  left: 59%; width: 35%; height: 2.2%; }
#btn-unarmed        { top: 12.22%; left: 59%; width: 35%; height: 2.2%; }
#btn-melee-weapons  { top: 14.52%; left: 59%; width: 35%; height: 2.2%; }
#btn-throwing       { top: 16.83%; left: 59%; width: 35%; height: 2.2%; }
#btn-first-aid      { top: 19.14%; left: 59%; width: 35%; height: 2.2%; }
#btn-doctor         { top: 21.44%; left: 59%; width: 35%; height: 2.2%; }
#btn-sneak          { top: 23.75%; left: 59%; width: 35%; height: 2.2%; }
#btn-lockpick       { top: 26.05%; left: 59%; width: 35%; height: 2.2%; }
#btn-steal          { top: 28.36%; left: 59%; width: 35%; height: 2.2%; }
#btn-traps          { top: 30.66%; left: 59%; width: 35%; height: 2.2%; }
#btn-science        { top: 32.97%; left: 59%; width: 35%; height: 2.2%; }
#btn-repair         { top: 35.28%; left: 59%; width: 35%; height: 2.2%; }
#btn-speech         { top: 37.58%; left: 59%; width: 35%; height: 2.2%; }
#btn-barter         { top: 39.89%; left: 59%; width: 35%; height: 2.2%; }
#btn-gambling       { top: 42.19%; left: 59%; width: 35%; height: 2.2%; }
#btn-outdoorsman    { top: 44.4%;  left: 59%; width: 35%; height: 2.2%; }
#btn-skill-points   { top: 47.8%;  left: 59%; width: 35%; height: 5%; }

#btn-contact        { top: 93.7%;  left: 52.5%; width: 17%; height: 5%; }

/* DYNAMIC FIELD */
#dynamic-field {
    position: absolute;
    top: 55%; 
    left: 53.5%; 
    width: 45%; 
    height: 37%;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-image: url('../img/contact2.jpg'); 
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: none; 
}

#dynamic-image {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* DEBUG CONTROLS */
#debug-controls {
    display: none;
    position: fixed;
    top: 10px; left: 10px;
    background: #222; color: #0f0;
    padding: 10px;
    border: 1px solid #0f0;
    font-family: sans-serif;
    font-size: 12px;
    z-index: 100;
}
#debug-controls label {
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
}