/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Fredoka One', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: #111;
  color: #222;
  margin: 0; padding: 0;
  display: flex; justify-content: center; align-items: center;
  width: 100vw; height: 100vh; overflow: hidden;
}

.hidden { display: none !important; }

/* CONTENITORE PRINCIPALE PROPORZIONATO 16:9 PER LA LIM */
.lim-container {
  position: relative;
  width: 100vw;
  height: calc(100vw * (9 / 16));
  max-height: 100vh;
  max-width: calc(100vh * (16 / 9));
  box-shadow: 0 0 20px rgba(0,0,0,0.8);
  overflow: hidden;
  background-color: #000;
  container-type: inline-size; 
}

/* --- MAPPING TOOL --- */
#dev-tools {
  position: absolute; top: 10px; left: 80px; z-index: 9999;
  background: rgba(255,255,255,0.95); padding: 15px; border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5); width: 300px;
}
#map-output { width: 100%; font-family: monospace; font-size: 11px; resize: none; }

.debug-mode .abs-btn { background-color: rgba(255, 0, 0, 0.4) !important; border: 1px solid red !important; }
.debug-mode .abs-text { background-color: rgba(0, 255, 0, 0.4) !important; border: 1px solid green !important; }

/* --- PULSANTE FULLSCREEN --- */
#fullscreen-btn {
  position: absolute; top: 15px; left: 15px; width: 50px; height: 50px;
  background-color: rgba(0,0,0,0.5); color: #fff; border: 2px solid #fff;
  border-radius: 12px; cursor: pointer; z-index: 10000;
  display: flex; justify-content: center; align-items: center;
  transition: all 0.2s ease; padding: 10px;
}
#fullscreen-btn:hover { transform: scale(1.1); background-color: rgba(255,255,255,0.2); }

/* PRELOADER */
.preloader { position: absolute; width: 100%; height: 100%; background: #0a3d8f; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.preloader-percent { font-size: 8cqw; font-weight: 900; color: #fff; }

/* OVERLAY VITTORIA E BOTTONI GENERICI */
.victory-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.7); z-index: 500;
  display: flex; align-items: center; justify-content: center;
}
.victory-content { background: #fff; padding: 40px; border-radius: 24px; text-align: center; max-width: 500px; width: 90%; }
.victory-img { max-width: 200px; height: auto; margin-bottom: 20px; }
.victory-buttons { display: flex; gap: 16px; justify-content: center; margin-top: 20px; }
.btn { padding: 10px 20px; border-radius: 30px; border: none; font-weight: bold; cursor: pointer; font-family: 'Fredoka One', sans-serif; font-size: 1.2rem;}
.btn.primary { background: #1f7aff; color: #fff; }
.btn.secondary { background: #ccc; color: #333; }

/* =======================================
   STILI DI BASE PER GLI ELEMENTI ASSOLUTI
   ======================================= */
.abs-text {
  position: absolute; transform: translate(-50%, -50%);
  font-family: 'Fredoka One', sans-serif; font-weight: bold; text-align: center;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.abs-btn {
  position: absolute; transform: translate(-50%, -50%);
  background-color: transparent; border: none; cursor: pointer; border-radius: 10px;
}
.abs-btn:active { background-color: rgba(0,0,0,0.2); }


/* =======================================
   SCHERMATA INIZIALE (INTRO.jpg)
   ======================================= */
#start-screen {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-image: url('image/INTRO.webp');
  background-size: 100% 100%; background-position: center; background-repeat: no-repeat;
  z-index: 100;
}

/* Effetto di "pulsante premuto" sulle difficoltà */
.diff-btn.active { box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.4); background-color: rgba(0,0,0,0.1); }
.op-card { border-radius: 50%; }

/* --- MAPPATURA START SCREEN --- */
#diff-1 { left: 28.5%; top: 61.7%; width: 20%; height: 7%; border-radius: 20px;}
#diff-2 { left: 49.0%; top: 62.0%; width: 20%; height: 7%; border-radius: 20px;}
#diff-3 { left: 71.4%; top: 62.0%; width: 20%; height: 7%; border-radius: 20px;}

/* Testo che cambia sul display nero */
#diff-desc-text { 
  left: 49.2%; top: 69.8%; 
  width: 58%; height: 6%; 
  font-size: 1.15cqw; 
  color: #fff; 
  text-shadow: 1px 1px 2px #000;
}

/* Bottoni operazioni in basso */
#op-add { left: 31.2%; top: 79.7%; width: 9%; height: 16%; }
#op-sub { left: 43.8%; top: 79.6%; width: 9%; height: 16%; }
#op-mul { left: 56.3%; top: 79.7%; width: 9%; height: 16%; }
#op-div { left: 68.8%; top: 79.9%; width: 9%; height: 16%; }


/* =======================================
   SCHERMATA GIOCO (UI_base.png)
   ======================================= */
#game-screen {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-image: url('image/UI_base.webp');
  background-size: 100% 100%; background-position: center; background-repeat: no-repeat;
}

/* --- STILI SPECIFICI PER PULSANTE AUDIO --- */
#btn-audio-speaker { display: flex; align-items: center; justify-content: center; }
.speaker-icon { width: 60%; height: 60%; object-fit: contain; pointer-events: none; }
.speaker-x { position: absolute; color: #ff3b3b; font-size: 2.8cqw; font-family: sans-serif; font-weight: 900; text-shadow: 0px 0px 4px #fff, 2px 2px 5px rgba(0,0,0,0.5); pointer-events: none; }

/* Controlli Menu inferiori (invisibili sul legno disegnato) */
.abs-control-btn { position: absolute; transform: translate(-50%, -50%); padding: 8px 18px; border-radius: 30px; border: none; background: transparent; color: transparent; cursor: pointer; }

/* Corridori */
.abs-runner { position: absolute; transform: translate(-50%, -100%); width: 8%; height: auto; transition: left 0.5s ease-out; }
.abs-runner.jump { animation: jump 0.4s ease-out; }
@keyframes jump { 0% { transform: translate(-50%, -100%); } 50% { transform: translate(-50%, calc(-100% - 30px)); } 100% { transform: translate(-50%, -100%); } }

/* --- MAPPATURA GIOCO --- */
#btn-audio-speaker { left: 80.8%; top: 7.4%; width: 6%; height: 7%; } 
#btn-audio-base    { left: 90.6%; top: 7.0%; width: 8%; height: 7%; } 

#op-blue      { top: 29.8%; left: 16.6%; width: 15%; height: 5%; font-size: 1.8cqw; color: #333; }
#display-blue { top: 36.2%; left: 16.8%; width: 15%; height: 5%; font-size: 3cqw; color: #fff; }
#score-blue   { top: 81.2%; left: 19.8%; width: 10%; height: 3%; font-size: 1.4cqw; color: #333; }
#btn-b-7  { top: 45.4%; left: 10.8%; width: 5.2%; height: 7.2%; }
#btn-b-8  { top: 45.4%; left: 16.6%; width: 5.2%; height: 7.2%; }
#btn-b-9  { top: 45.5%; left: 22.4%; width: 5.2%; height: 7.2%; }
#btn-b-4  { top: 54.2%; left: 10.8%; width: 5.2%; height: 7.2%; }
#btn-b-5  { top: 54.2%; left: 16.6%; width: 5.2%; height: 7.2%; }
#btn-b-6  { top: 54.2%; left: 22.5%; width: 5.2%; height: 7.2%; }
#btn-b-1  { top: 62.4%; left: 10.9%; width: 5.2%; height: 7.2%; }
#btn-b-2  { top: 62.2%; left: 16.7%; width: 5.2%; height: 7.2%; }
#btn-b-3  { top: 62.6%; left: 22.6%; width: 5.2%; height: 7.2%; }
#btn-b-c  { top: 70.9%; left: 10.9%; width: 5.2%; height: 7.2%; }
#btn-b-0  { top: 71.1%; left: 16.8%; width: 5.2%; height: 7.2%; }
#btn-b-ok { top: 71.2%; left: 22.7%; width: 5.2%; height: 7.2%; }

#op-red      { top: 29.7%; left: 84.5%; width: 15%; height: 5%; font-size: 1.8cqw; color: #333; } 
#display-red { top: 36.3%; left: 85.3%; width: 15%; height: 5%; font-size: 3cqw; color: #fff; } 
#score-red   { top: 81.5%; left: 87.9%; width: 10%; height: 3%; font-size: 1.4cqw; color: #333; } 
#btn-r-7  { top: 45.6%; left: 79.2%; width: 5.2%; height: 7.2%; }
#btn-r-8  { top: 45.5%; left: 84.9%; width: 5.2%; height: 7.2%; }
#btn-r-9  { top: 45.6%; left: 90.6%; width: 5.2%; height: 7.2%; }
#btn-r-4  { top: 54.0%; left: 79.2%; width: 5.2%; height: 7.2%; }
#btn-r-5  { top: 53.9%; left: 85.1%; width: 5.2%; height: 7.2%; }
#btn-r-6  { top: 53.9%; left: 90.8%; width: 5.2%; height: 7.2%; }
#btn-r-1  { top: 62.2%; left: 79.1%; width: 5.2%; height: 7.2%; }
#btn-r-2  { top: 62.4%; left: 85.0%; width: 5.2%; height: 7.2%; }
#btn-r-3  { top: 62.4%; left: 90.7%; width: 5.2%; height: 7.2%; }
#btn-r-c  { top: 71.1%; left: 79.1%; width: 5.2%; height: 7.2%; }
#btn-r-0  { top: 71.1%; left: 85.0%; width: 5.2%; height: 7.2%; }
#btn-r-ok { top: 70.9%; left: 90.8%; width: 5.2%; height: 7.2%; }

#runner-blue { top: 46%; left: 33.7%; } 
#runner-red  { top: 62%; left: 33.7%; }

/* --- BOTTONI NUOVA GARA E MENU --- */
#btn-new  { top: 74%; left: 41.5%; width: 13%; height: 6%; }
#btn-menu { top: 74%; left: 58.5%; width: 13%; height: 6%; }