/* Pagina di Paint & Hide: il gioco occupa tutta la finestra, sul computer e sul telefono. */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #231f2b;
  /* Niente selezione del testo, menu del tocco lungo o riquadro azzurro al tocco (telefono). */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#unity-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  /* I gesti del dito vanno al gioco, non allo scorrimento o allo zoom della pagina. */
  touch-action: none;
  background: #231f2b;
}

#loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(135deg, #f7d6e0 0%, #fbe7d5 30%, #e3f5ec 65%, #dcecf8 100%);
  font-family: "Nunito", "Trebuchet MS", "Segoe UI", sans-serif;
  color: #4a3d5c;
}

#loading-title {
  font-size: clamp(40px, 9vw, 88px);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-shadow: 0 3px 0 rgba(74, 61, 92, 0.35), 0 8px 24px rgba(74, 61, 92, 0.25);
}

#loading-subtitle {
  font-size: clamp(15px, 2.4vw, 20px);
  font-weight: 700;
  opacity: 0.8;
}

#loading-bar {
  width: min(360px, 70vw);
  height: 14px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 3px rgba(74, 61, 92, 0.25);
  overflow: hidden;
  margin-top: 10px;
}

#loading-bar-full {
  width: 0%;
  height: 100%;
  border-radius: 7px;
  background: linear-gradient(90deg, #f7b7c8, #ffd3b6, #a8e6cf, #a7d8f0, #c9b6e4);
  transition: width 0.2s ease-out;
}

#loading-hint {
  font-size: 15px;
  font-weight: 700;
  opacity: 0.7;
}

#warning {
  position: fixed;
  left: 50%;
  top: 4%;
  transform: translateX(-50%);
  display: none;
  z-index: 10;
  font-family: "Segoe UI", sans-serif;
  font-size: 15px;
}

#warning .error { background: #e0443a; color: white; padding: 10px 14px; border-radius: 8px; }
#warning .warning { background: #ffe38a; color: #3a2e00; padding: 10px 14px; border-radius: 8px; margin-top: 6px; }