/* =========================
Basis layout
========================= */

html,
body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}

body {
font-family: Arial, Helvetica, sans-serif;
background: black;
color: white;
}

/* =========================
Cockpit afbeelding
========================= */

#game-container {
position: relative;
width: 100vw;
height: 100vh;

display: flex;
justify-content: center;
align-items: center;

background: black;
overflow: hidden;
}

#cockpit-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}

#hotspots-layer {
position: absolute;
inset: 0;
}

/* =========================
Hotspots
========================= */

.hotspot {
  position: absolute;
  cursor: pointer;

  background: rgba(255, 0, 0, 0);
  border: 0px solid red;
  box-sizing: border-box;
}


/* Tijdens testen handig */
/*
.hotspot:hover {
outline: 2px dashed rgba(255,255,255,0.35);
}
*/

/* =========================
Popup overlay
========================= */

.popup-overlay {
position: fixed;
inset: 0;

background: rgba(0,0,0,0.65);

display: flex;
justify-content: center;
align-items: center;

z-index: 3000;

animation: fadeIn 0.2s ease;
}

/* =========================
Popup basis
========================= */

.popup {
background: rgba(25,25,25,0.96);

padding: 22px;

border-radius: 14px;

width: min(500px, 92vw);
max-height: 88vh;

overflow: hidden;

display: flex;
flex-direction: column;
align-items: center;

gap: 12px;
}

/* =========================
Afbeeldingen & video
========================= */

.popup-image {
  width: min(800px, 95vw);
}

.popup-image img {
  max-width: 80vw;
  max-height: 80vh;
  object-fit: contain;
}

.popup video {
width: 100%;
max-height: 50vh;

border-radius: 10px;
}

/* =========================
Eindscherm
========================= */

.popup-end {
font-size: 26px;
}

.popup-end h1 {
font-size: 42px;
margin-bottom: 20px;
}

/* =========================
Meters
========================= */

.popup-meters {
background: transparent;
box-shadow: none;
padding: 10px;
}

.meter-panel {
position: relative;
}

.meter-panel img {
width: 100%;
display: block;
border-radius: 12px;
}

.meter-hand {
position: absolute;

width: 4px;

background: #ff4444;

transform-origin: bottom center;

cursor: pointer;

border-radius: 2px;
}

/* =========================
Code input
========================= */

.popup input {
width: 90px;

margin: 6px 0;

padding: 8px 10px;

text-align: center;

font-size: 18px;

border: none;
border-radius: 6px;
}

/* =========================
Numpad
========================= */

#numpad {
display: grid;

grid-template-columns: repeat(3, 60px);

gap: 8px;

justify-content: center;

margin: 10px auto;
}

#numpad button {
all: unset;

width: 55px;
height: 55px;

display: flex;
justify-content: center;
align-items: center;

background: #8b8b8b;

color: white;

border-radius: 6px;

cursor: pointer;

font-size: 16px;
}

.popup-phone #numpad {
flex: 0 0 auto;
}

#phoneMessage {
min-height: 20px;
}

/* =========================
Buttons
========================= */

.popup button {
min-width: 110px;

padding: 10px 16px;

border: none;
border-radius: 8px;

background: #3a86ff;
color: white;

font-size: 15px;

cursor: pointer;

transition: 0.15s;
}

.popup button:hover {
background: #559cff;
}

.popup button:active {
transform: scale(0.96);
}

/* =========================
Button rij
========================= */

.popup-buttons {
display: flex;

justify-content: center;
flex-wrap: wrap;

gap: 10px;

width: 100%;

margin-top: 6px;
}

/* =========================
Tekst
========================= */

.popup h3 {
margin-top: 0;
margin-bottom: 10px;

font-size: 20px;
}

.popup p {
max-width: 100%;
line-height: 1.4;
}

/* =========================
Startscherm
========================= */

.popup-start {
display: flex;
flex-direction: column;

justify-content: center;
align-items: center;

background: #111;

color: white;

text-align: left;

padding: 40px;

border-radius: 12px;

max-width: 600px;
width: 90%;

box-shadow: 0 0 20px rgba(0,0,0,0.7);
}

.popup-start h1 {
font-size: 2em;
margin-bottom: 20px;
}

.popup-start p {
font-size: 1.2em;
margin-bottom: 40px;
line-height: 1.4;

white-space: pre-line;
}

.popup-start button {
font-size: 1.5em;

padding: 12px 30px;

background: #4CAF50;

border: none;
border-radius: 8px;

color: white;

cursor: pointer;
}

.popup-start button:hover {
background: #45a049;
}

/* =========================
Fade overlay
========================= */

.fade-overlay {
position: fixed;

inset: 0;

background: black;

pointer-events: none;

z-index: 9999;
}

/* =========================
Animaties
========================= */

@keyframes fadeIn {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

@keyframes popupIn {
from {
opacity: 0;
transform: translateY(10px) scale(0.97);
}

to {
opacity: 1;
transform: translateY(0) scale(1);
}
}