* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
  cursor: none;
  user-select: none;
}

body {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: #0e1420;
  color: #eef2f8;
}

#screen {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background 0.3s ease;
}

#screen.idle      { background: #0e1420; }
#screen.in        { background: #0d3a25; }
#screen.out       { background: #3a2a0d; }
#screen.unknown   { background: #401318; }
#screen.duplicate { background: #21304a; }

#clock {
  font-size: 18vw;
  font-weight: 200;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

#date {
  font-size: 3.2vw;
  color: #8fa0b8;
  margin-top: 1.5vh;
  text-transform: capitalize;
}

.hint {
  font-size: 2.6vw;
  color: #5d6f8a;
  margin-top: 7vh;
}

.pulse {
  width: 1.4vw;
  height: 1.4vw;
  border-radius: 50%;
  background: #3b82f6;
  margin: 3vh auto 0;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 0.5; }
  50%      { transform: scale(1.6); opacity: 1; }
}

#result-icon {
  font-size: 11vw;
  line-height: 1;
}

#result-title {
  font-size: 7.5vw;
  font-weight: 600;
  margin-top: 3vh;
}

#result-subtitle {
  font-size: 3.4vw;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 1.5vh;
}

#result-funny[hidden] { display: none; }

#result-funny {
  margin-top: 3vh;
  font-size: 3vw;
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
  animation: motd-pop 0.4s ease;
}

#result-funny::before { content: '« '; }
#result-funny::after { content: ' »'; }

#result-motd[hidden] { display: none; }

#result-motd {
  margin: 5vh auto 0;
  max-width: 70vw;
  padding: 3vh 3vw;
  font-size: 3.6vw;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 1.5vw;
  animation: motd-pop 0.4s ease;
}

#result-motd::before {
  content: "📌 Message pour vous";
  display: block;
  font-size: 2vw;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 1.2vh;
}

@keyframes motd-pop {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}