:root {
  --primary-color: #007bff;
  --primary-hover: #006ae6;
  --primary-active: #005bb5;
  --secondary-color: #6c757d;
  --background-gradient-start: #ff9a9e;
  --background-gradient-end: #fad0c4;
  --font-color: #ffffff;
  --neon-green: #39FF14;
  --neon-red: #FF3131;
  --neon-yellow: #FFD300;
  --dark-bg: #1a1a1a;
  --darker-bg: #000000;
  --component-size: min(85vw, 400px);
}

/* Reset base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Roboto', sans-serif;
  color: var(--font-color);
  background: var(--darker-bg);
  min-height: 100vh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

header {
  text-align: center;
  margin-bottom: 20px;
}

h1 {
  font-size: 2em;
  color: var(--neon-yellow);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Component container */
.component-container {
  width: var(--component-size);
  margin: 20px auto;
}

#component {
  width: 100%;
  height: var(--component-size);
  background: var(--dark-bg);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4em;
  font-weight: bold;
  color: var(--neon-green);
  box-shadow: 0 0 20px rgba(57, 255, 20, 0.3);
  border: 3px solid var(--neon-green);
  text-shadow: 0 0 10px var(--neon-green);
}

/* Controls container */
.controls-container {
  width: var(--component-size);
  margin: 20px auto;
}

button {
  background: var(--dark-bg);
  color: var(--neon-green);
  border: 2px solid var(--neon-green);
  padding: 15px 30px;
  border-radius: 50px;
  font-size: 1.2em;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 100%;
  margin: 10px 0;
}

button:hover {
  background: var(--neon-green);
  color: var(--dark-bg);
  box-shadow: 0 0 15px var(--neon-green);
}

/* Input group */
.input-group {
  width: var(--component-size);
  margin: 20px auto;
  display: flex;
  gap: 0;
}

.input-group input[type="number"] {
  width: 35%;
  background: var(--dark-bg);
  border: 2px solid var(--neon-yellow);
  color: var(--neon-yellow);
  padding: 10px;
  border-radius: 50px;
  font-size: 1.1em;
  text-align: center;
}

.input-group button {
  width: 65%;
  padding: 10px;
  font-size: 1.1em;
  margin: 0;
}

input:focus {
  outline: none;
  box-shadow: 0 0 15px var(--neon-yellow);
}

/* Display container */
.display-container {
  width: var(--component-size);
  background: var(--dark-bg);
  padding: 20px;
  border-radius: 15px;
  margin: 20px auto;
  text-align: center;
  border: 2px solid var(--neon-yellow);
}

#outputResult {
  color: var(--neon-yellow);
  font-size: 2em;
  font-weight: bold;
}

/* Animazioni */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.pulse {
  animation: pulse 0.5s ease-in-out;
}

/* Media queries per dispositivi piccoli */
@media (max-width: 600px) {
  :root {
    --component-size: 90vw;
  }
  h1 {
    font-size: 1.8em;
  }
  #component {
    font-size: 3em;
  }
  button, input {
    font-size: 1em;
  }
}

@media (max-width: 400px) {
  :root {
    --component-size: 95vw;
  }
  h1 {
    font-size: 1.6em;
  }
  #component {
    font-size: 2.8em;
  }
  button, input {
    font-size: 0.9em;
    padding: 8px 16px;
  }
  .controls-container, .input-group, .display-container {
    margin: 10px auto;
  }
}

/* Aggiornamento stile per il timer */
#timer {
  width: 100%;
  height: 60vh; /* 60% dell'altezza della viewport per evidenziare il timer */
  background: var(--dark-bg);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 8em; /* font size aumentato per renderlo molto visibile */
  font-weight: bold;
  color: var(--neon-yellow);  /* testo in giallo fluo */
  box-shadow: 0 0 20px rgba(255, 211, 0, 0.3);  /* ombra con tonalità gialla */
  border: 3px solid var(--neon-yellow);  /* bordo in giallo fluo */
  text-shadow: 0 0 10px var(--neon-yellow);  /* effetto neon giallo */
}

/* Mantengo lo stile per timer-label */
.timer-label {
  text-align: center;
  font-size: 1.5em;
  color: var(--neon-yellow);
  margin-top: 10px;
}

/* Media query per schermi con altezza ridotta (es. iOS Safari) */
@media (max-height: 700px) {
  /* Riduce l'altezza del timer e la dimensione del font */
  #timer {
    height: 50vh; /* Ridotto al 50% della viewport */
    font-size: 6em;
  }
  /* Riduce il padding della container per adattarsi a schermi minori */
  .container {
    padding: 10px;
  }
  /* Riduce i margini di header, main, controls-container, input-group e display-container */
  header, main, .controls-container, .input-group, .display-container {
    margin: 10px auto;
  }
}