:root {
  --red: #d40000;
  --red-active: #ff2a2a;
  --blue: #0044cc;
  --blue-active: #2a6cff;
  --black: #000;
  --white: #fff;
  --yellow: #ffd600;
  --top-h: 30dvh;
  --bottom-h: 34dvh;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--black);
  color: var(--white);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

#app {
  display: grid;
  grid-template-rows: var(--top-h) 1fr var(--bottom-h);
  height: 100dvh;
  width: 100vw;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.big-button {
  border: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  cursor: pointer;
  outline: none;
  transition: background 80ms;
}
.big-button .icon { font-size: clamp(48px, 12dvh, 96px); line-height: 1; }
.big-button .label {
  font-size: clamp(30px, 6dvh, 56px);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  text-align: center;
  padding: 0 12px;
}
.big-button.blue { background: var(--blue); }
.big-button.blue:active, .big-button.blue.pressed { background: var(--blue-active); }
.big-button.red { background: var(--red); }
.big-button.red:active, .big-button.red.pressed { background: var(--red-active); }

.big-button.listening { background: var(--yellow); color: var(--black); }
.big-button.listening .label { text-shadow: none; }
.big-button[disabled] { opacity: 0.55; }

#middle {
  position: relative;
  background: var(--black);
  overflow: hidden;
  border-top: 4px solid var(--white);
  border-bottom: 4px solid var(--white);
}

#camera {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111;
}

/* When an answer is shown, the camera shrinks to a thumbnail so she can still aim. */
.state-answer #camera {
  inset: auto 8px 8px auto;
  width: 28%;
  height: 34%;
  border: 3px solid var(--white);
  border-radius: 10px;
  z-index: 2;
}

#answer {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 14px 16px;
  background: var(--black);
  z-index: 1;
}
#answer-text {
  margin: 0;
  font-size: clamp(24px, 3.6dvh, 40px);
  line-height: 1.35;
  font-weight: 700;
}

#status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  font-size: clamp(28px, 4.5dvh, 48px);
  font-weight: 900;
  background: rgba(0,0,0,0.85);
  z-index: 3;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

#setup {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--black);
  padding: 16px;
  font-size: 22px;
  font-weight: 700;
}

[hidden] { display: none !important; }