/* Базовая типографика и переменные */
:root{
  --fs: 16px;
  --bg: #000;
  --fg: #fff;
  --glow: rgba(255,255,255,0.06);
  --accent: #39c5bb;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
#app{position:relative;height:100vh;width:100vw;overflow:hidden;background:#000}

/* Видео на полный экран */
#video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}

/* Кнопки */
.btn{
  appearance:none;border:0;border-radius:12px;padding:.6rem .9rem;
  background:#111;color:#fff;font-size:1rem;box-shadow:0 0 0 1px #222, 0 6px 24px var(--glow);
  backdrop-filter:saturate(1.2) blur(2px);-webkit-backdrop-filter:saturate(1.2) blur(2px);
}
.btn:active{transform:translateY(1px);opacity:.9}
.select{background:#111;color:#fff;border-radius:10px;padding:.4rem}

/* Большой затвор */
.btn-shutter{
  position:absolute;left:50%;bottom:20vh;transform:translateX(-50%);
  width:110px;height:110px;border-radius:999px;border:6px solid rgba(255,255,255,.6);
  background:radial-gradient(circle at 50% 40%, #fff, #ddd 60%, #bbb 100%);
  box-shadow:0 10px 40px rgba(0,0,0,.5), inset 0 0 6px rgba(0,0,0,.35);
  opacity:.95;
}

/* HUD-плашка */
.hud{
  position:absolute;left:0;right:0;padding:.6rem;
  background:linear-gradient( to var(--dock-gradient-dir, top), rgba(0,0,0,.55), rgba(0,0,0,.25) );
  display:flex;flex-direction:column;gap:.5rem;pointer-events:auto;
}
.hud.top{top:0;--dock-gradient-dir:bottom;}
.hud.bottom{bottom:0;--dock-gradient-dir:top;}

.row.controls{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.hint{opacity:.85;font-size:calc(var(--fs) * .95)}
.result{
  font-size:calc(var(--fs) * 1.15);
  background:rgba(0,0,0,.35);
  padding:.5rem .7rem;border-radius:10px;min-height:2.2em
}

/* Вспышка оверлеем */
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}

/* Тюнинг шрифта */
html{font-size:var(--fs)}

/* RTL для иврита */
.rtl{direction:rtl}
.rtl .row.controls{justify-content:flex-end}