:root{
  --black:#000;
  --white:#fff;
  --yellow:#F5C542;
  --green:#1E7F4F;
  --red:#B00020;
  --overlay: rgba(0,0,0,0.6);
  --btn-size: min(64vw, 300px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin:0;
  background:#004638;
  color:#fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.screen {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.screen.active { display: flex; }

.stack {
  width: 100%;
  max-width: 760px;
  display: grid;
  gap: 20px;
  place-items: center;
  text-align: center;
}

.logo {
  width: min(60vw, 380px);
  height: auto;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.5));
}

.btn {
  font-size: 18px;
  padding: 16px 28px;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
}
.btn.primary { background: #111; border-color: #444; }
.btn.primary:active { transform: scale(0.98); }
.btn.ghost { background: transparent; border-color: #888; color: #ddd; }
.btn.small { position: absolute; left: 16px; top: 16px; padding: 10px 14px; font-size: 14px; }

.timer {
  font-variant-numeric: tabular-nums;
  font-size: clamp(220px, 220px, 220px);
  letter-spacing: 1px;
}

.round {
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 999px;
  border: 4px solid #fff;
  background: #111;
  color: var(--yellow);
  font-weight: 700;
  font-size: clamp(22px, 5.2vw, 36px);
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.round:active { transform: scale(0.98); }

.subtle { opacity: 0.7; font-size: 14px; }

#camera {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* front camera mirror */
  background: #000;
}

.overlay {
  position: absolute; inset: 0;
  display: grid; place-items: end center;
  padding: 24px;
  pointer-events: none;
}
.overlay-box{
  background: var(--overlay);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 18px 16px;
  border-radius: 12px;
  max-width: 90vw;
}
.overlay h2 { margin: 0 0 6px; font-size: 18px; }
.overlay p { margin: 2px 0; font-size: 14px; }
.hint { opacity: 0.8; }

.hidden { display: none; }

#screen-result { background: #000; }
#screen-result.win  { background: var(--green); }
#screen-result.lose { background: var(--red); }
.result-message {
  font-size: clamp(24px, 6vw, 40px);
  font-weight: 800;
  text-align: center;
  color: #fff;
  text-shadow: 0 4px 18px rgba(0,0,0,0.25);
}

/* Win / Lose message colors */
#screen-result.win  .result-message { color: #fff; }
#screen-result.lose .result-message { color: var(--yellow); }

/* Big kiosk targets */
button { min-height: 56px; min-width: 56px; }

/* ROI frame centered on screen */
#roi-box {
  position: absolute;
  width: 70vw;
  height: 60vh;
  max-width: 700px;
  max-height: 600px;
  border: 2px dashed rgba(255,255,255,0.6);
  border-radius: 12px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Debug HUD */
.debug {
  position: absolute;
  left: 16px; bottom: 16px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 10px 12px;
  border-radius: 10px;
  font: 12px/1.25 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  white-space: pre;
  max-width: 80vw;
}

/* Safe area for iOS notch */
@supports(padding:max(0px)) {
  .screen { padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
}