* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #87d6ff;
  color: #102033;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
  min-height: 100dvh;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

[hidden] { display: none !important; }

button {
  font: inherit;
  color: #fff;
  background: #102033;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

button:disabled {
  opacity: 0.7;
  cursor: default;
}

.panel {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  gap: 12px;
}

h1 {
  margin: 0;
  font-size: clamp(2.6rem, 12vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.lead {
  margin: 0;
  max-width: 18rem;
  font-size: clamp(1.25rem, 5.2vw, 1.7rem);
  font-weight: 700;
  line-height: 1.3;
}

.msg {
  margin: 0;
  max-width: 18rem;
  font-size: clamp(1.15rem, 4.6vw, 1.45rem);
  font-weight: 700;
  line-height: 1.3;
}

#start-btn, #again {
  margin-top: 12px;
  min-width: 10rem;
  min-height: 4rem;
  padding: 0.9rem 2rem;
  font-size: 1.6rem;
  font-weight: 800;
}

#seconds {
  margin: 0;
  font-size: clamp(5.5rem, 32vw, 9rem);
  font-weight: 800;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}

#seconds-label {
  margin: 0;
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  font-weight: 800;
}

#cam {
  width: min(46vw, 200px);
  height: min(46vw, 200px);
  margin-top: 12px;
  object-fit: cover;
  border-radius: 28px;
  background: #102033;
  transform: scaleX(-1);
}

.result {
  margin: 0;
  font-size: clamp(2.8rem, 13vw, 4.8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

#lasted {
  margin: 0;
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  font-weight: 800;
}