/*
 * styles.css — Mini App PickMe.
 * База — тема Telegram (--tg-theme-*), чтобы окно было родным и уважало светлую/тёмную.
 * Единственный "фирменный" акцент — печать подлинности (seal) на успехе и рамка сканера.
 * Всё остальное — тихое и дисциплинированное.
 */
:root {
  --bg: var(--tg-theme-bg-color, #0f1115);
  --surface: var(--tg-theme-secondary-bg-color, #171a21);
  --text: var(--tg-theme-text-color, #f2f4f8);
  --hint: var(--tg-theme-hint-color, #8b93a3);
  --btn: var(--tg-theme-button-color, #2f6df6);
  --btn-text: var(--tg-theme-button-text-color, #ffffff);

  /* фирменные состояния */
  --seal: #e8b341;      /* печать подлинности — амбра */
  --warn: #e2a13a;
  --err: #e5484d;
  --ok: #2fbf71;

  --radius: 16px;
  --gap: 16px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 -apple-system, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

/* --- Верхняя строка --- */
.topbar {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 12px;
}
.wordmark {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 20px;
}
.wordmark::first-letter { color: var(--seal); }  /* тихий фирменный акцент */
.badge {
  font-size: 12px;
  color: var(--hint);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

/* --- Сцена сканера --- */
.stage {
  position: relative;
  flex: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Рамка прицела — фирменный элемент. Квадрат в центре с уголками и лучом. */
.reticle {
  position: relative;
  width: min(68vw, 300px);
  aspect-ratio: 1;
  z-index: 2;
}
.corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 3px solid #fff;
  opacity: 0.95;
}
.corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }

.beam {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 2px;
  top: 50%;
  background: linear-gradient(90deg, transparent, var(--seal), transparent);
  box-shadow: 0 0 12px var(--seal);
  animation: sweep 2.2s ease-in-out infinite;
}
@keyframes sweep {
  0%   { top: 10%; opacity: 0.2; }
  50%  { top: 90%; opacity: 1; }
  100% { top: 10%; opacity: 0.2; }
}
/* Состояние проверки — рамка "думает" */
.reticle.busy .corner { border-color: var(--seal); animation: pulse 1s ease-in-out infinite; }
.reticle.busy .beam { animation-duration: 0.9s; }
@keyframes pulse { 50% { opacity: 0.4; } }

.hint {
  position: absolute;
  bottom: 18px;
  left: 0; right: 0;
  margin: 0 auto;
  width: fit-content;
  max-width: 84%;
  text-align: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 14px;
  z-index: 3;
}

/* --- Экран результата --- */
.result {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 24px 12px;
}
.result-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
}
.result-icon::after {
  content: "";
  width: 52px;
  height: 52px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}

/* Печать подлинности — успех */
.result[data-icon="seal"] .result-icon {
  color: var(--seal);
  background: color-mix(in srgb, var(--seal) 16%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--seal) 10%, transparent);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  animation: stamp 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes stamp {
  0% { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.result[data-icon="clock"] .result-icon {
  color: var(--btn);
  background: color-mix(in srgb, var(--btn) 16%, transparent);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.result[data-icon="dup"] .result-icon {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E");
}
.result[data-icon="cross"] .result-icon {
  color: var(--err);
  background: color-mix(in srgb, var(--err) 16%, transparent);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

.result-title { font-size: 22px; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.result-text { color: var(--hint); margin: 0; max-width: 32ch; }

.btn {
  margin-top: 8px;
  border: 0;
  border-radius: 12px;
  padding: 14px 22px;
  font-size: 16px;
  font-weight: 700;
  color: var(--btn-text);
  background: var(--btn);
  cursor: pointer;
}
.btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--btn) 50%, #fff); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .beam, .reticle.busy .corner { animation: none; }
  .result[data-icon="seal"] .result-icon { animation: none; }
}

/* фикс: тёмный фон гарантированно + прятать пустое видео на экране результата */
html, body { background: #0f1115 !important; }
.stage[hidden] { display: none !important; }
#video { background: #000; }