:root{
  --ink:#0a0a08;
  --ink-soft:#15140f;
  --paper:#eae5d6;
  --signal:#f5c518;   
  --signal-dim:#7a6312;
  --danger:#e0533d;
  --ok:#5fae6e;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gallery-width: 220px;

  --gallery-bg:#ffffff;
  --gallery-border:#e3e0d8;
  --gallery-ink:#1c1a16;
  --gallery-ink-soft:#6b665c;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  width:100vw; height:100vh;
  background:var(--ink);
  overflow:hidden;
  font-family:var(--sans);
  color:var(--paper);
}

#app{
  display:flex;
  width:100vw;
  height:100vh;
}


#stage{
  position:relative;
  flex:1 1 auto;
  height:100vh;
  background:#000;
  overflow:hidden;
}

video{
  display:none;
}

canvas#sceneCanvas{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  display:block;
}


.hud-top{
  position:absolute;
  top:0; left:0; right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  background:linear-gradient(to bottom, rgba(10,10,8,0.85), transparent);
  pointer-events:none;
  z-index:5;
}

.brand{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--signal);
  display:flex;
  align-items:baseline;
  gap:8px;
}
.brand small{
  color:var(--paper);
  opacity:0.55;
  letter-spacing:0.1em;
}

.status-pill{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:2px;
  border:1px solid rgba(234,229,214,0.25);
  background:rgba(10,10,8,0.6);
  display:flex;
  align-items:center;
  gap:8px;
}
.status-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--danger);
  box-shadow:0 0 6px var(--danger);
  transition:background 0.2s, box-shadow 0.2s;
}
.status-dot.live{ background:var(--ok); box-shadow:0 0 6px var(--ok); }
.status-dot.armed{ background:var(--signal); box-shadow:0 0 8px var(--signal); }
.status-dot.solved{ background:var(--ok); box-shadow:0 0 10px var(--ok); }


.hud-bottom{
  position:absolute;
  bottom:0; left:0; right:0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  gap:16px;
  padding:18px 22px 22px;
  background:linear-gradient(to top, rgba(10,10,8,0.9), transparent);
  pointer-events:none;
  z-index:5;
}

.gesture-key{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.03em;
  color:rgba(234,229,214,0.7);
  max-width:100%;
}
.gesture-key .item{ display:flex; align-items:center; gap:7px; }
.gesture-key .swatch{
  width:9px; height:9px;
  border:1.5px solid var(--paper);
  opacity:0.7;
  flex-shrink:0;
}
.gesture-key .swatch.pinch{ border-radius:50%; border-color:var(--signal); }
.gesture-key .swatch.drag{ border-radius:50%; border-color:var(--ok); border-style:dashed; }
.gesture-key .swatch.fist{ border-radius:2px; border-color:var(--danger); background:var(--danger); opacity:0.9;}

.progress-badge{
  position:absolute;
  top:64px;
  right:22px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:7px 12px;
  border-radius:2px;
  border:1px solid rgba(245,197,24,0.35);
  background:rgba(10,10,8,0.7);
  color:var(--signal);
  z-index:5;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  pointer-events:none;
}
.progress-badge.visible{ opacity:1; transform:translateY(0); }
.progress-badge.solved{
  border-color:rgba(95,174,110,0.6);
  color:var(--ok);
}


#loadingOverlay{
  position:absolute; inset:0;
  background:var(--ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  z-index:20;
  transition:opacity 0.4s ease;
}
#loadingOverlay.hidden{ opacity:0; pointer-events:none; }
.loader-text{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--signal);
  text-align:center;
  max-width:80vw;
}
.loader-bar{
  width:220px; height:2px;
  background:rgba(234,229,214,0.15);
  overflow:hidden;
}
.loader-bar::after{
  content:'';
  display:block;
  width:40%; height:100%;
  background:var(--signal);
  animation:loaderSlide 1.1s ease-in-out infinite;
}
@keyframes loaderSlide{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(350%); }
}
.loader-retry{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  background:transparent;
  border:1px solid var(--signal);
  color:var(--signal);
  padding:8px 16px;
  cursor:pointer;
  transition:background 0.15s, color 0.15s;
}
.loader-retry:hover{ background:var(--signal); color:#1a1400; }
.loader-retry.hidden{ display:none; }

#errorBanner{
  position:absolute;
  top:18px; left:50%;
  transform:translateX(-50%);
  background:var(--danger);
  color:#1a0a08;
  font-family:var(--mono);
  font-size:12px;
  padding:10px 16px;
  border-radius:2px;
  z-index:30;
  display:none;
  max-width:80vw;
  text-align:center;
}


#gallery{
  flex:0 0 var(--gallery-width);
  width:var(--gallery-width);
  height:100vh;
  background:var(--gallery-bg);
  color:var(--gallery-ink);
  border-left:1px solid var(--gallery-border);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.gallery-head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px 10px;
  border-bottom:1px solid var(--gallery-border);
}
.gallery-title{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--signal-dim);
}
.gallery-count{
  font-family:var(--mono);
  font-size:11px;
  color:var(--gallery-ink-soft);
}


.strip-complete-msg{
  flex:0 0 auto;
  margin:12px 14px 0;
  padding:10px 12px;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.5;
  text-align:center;
  letter-spacing:0.03em;
  color:#3d6b46;
  background:#eaf5ec;
  border:1px solid #bfe3c6;
  border-radius:3px;
  display:none;
}
.strip-complete-msg.visible{ display:block; }

.gallery-strip{
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.gallery-strip::-webkit-scrollbar{ width:6px; }
.gallery-strip::-webkit-scrollbar-thumb{ background:var(--gallery-border); border-radius:3px; }
.gallery-strip::-webkit-scrollbar-track{ background:transparent; }

.gallery-empty{
  font-family:var(--mono);
  font-size:10.5px;
  line-height:1.6;
  color:var(--gallery-ink-soft);
  text-align:center;
  padding:24px 4px;
}


.print{
  background:#fff;
  border:1px solid var(--gallery-border);
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
  padding:6px 6px 10px;
  animation:printDrop 0.4s cubic-bezier(0.2, 0.8, 0.3, 1.1);
  flex-shrink:0;
}
@keyframes printDrop{
  0%{ opacity:0; transform:translateY(-14px) rotate(-2deg); }
  100%{ opacity:1; transform:translateY(0) rotate(0deg); }
}
.print canvas{
  width:100%;
  display:block;
}
.print .print-label{
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:0.06em;
  color:var(--gallery-ink-soft);
  text-align:center;
  margin-top:6px;
}

.gallery-actions{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 14px;
  border-top:1px solid var(--gallery-border);
}

.gallery-action-btn{
  width:100%;
  padding:9px 0;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:#fff;
  border:1px solid var(--signal-dim);
  color:var(--signal-dim);
  cursor:pointer;
  transition:background 0.15s, color 0.15s, opacity 0.15s;
}
.gallery-action-btn:hover:not(:disabled){
  background:var(--signal);
  border-color:var(--signal);
  color:#1a1400;
}
.gallery-action-btn:disabled{
  opacity:0.35;
  cursor:not-allowed;
}

.gallery-action-btn--danger{
  border-color:var(--danger);
  color:var(--danger);
}
.gallery-action-btn--danger:hover{
  background:var(--danger);
  border-color:var(--danger);
  color:#fff;
}

.confirm-dialog{
  width:min(420px, calc(100vw - 32px));
  padding:0;
  border:1px solid var(--signal-dim);
  border-radius:2px;
  background:var(--ink-soft);
  color:var(--paper);
  box-shadow:0 24px 70px rgba(0,0,0,0.65);
}
.confirm-dialog[open]{
  animation:dialogEnter 0.18s ease-out;
}
.confirm-dialog::backdrop{
  background:rgba(10,10,8,0.78);
  backdrop-filter:blur(3px);
  animation:backdropEnter 0.18s ease-out;
}
.confirm-dialog__panel{
  padding:24px;
}
.confirm-dialog__eyebrow{
  margin-bottom:12px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--danger);
}
.confirm-dialog h2{
  margin:0;
  font-family:var(--mono);
  font-size:18px;
  font-weight:500;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.confirm-dialog p{
  margin:14px 0 22px;
  color:rgba(234,229,214,0.7);
  font-size:13px;
  line-height:1.6;
}
.confirm-dialog__actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.confirm-dialog__button{
  min-width:108px;
  padding:9px 14px;
  border:1px solid var(--signal-dim);
  background:transparent;
  color:var(--signal);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background 0.15s, border-color 0.15s, color 0.15s;
}
.confirm-dialog__button:hover{
  border-color:var(--signal);
  background:var(--signal);
  color:#1a1400;
}
.confirm-dialog__button--danger{
  border-color:var(--danger);
  color:var(--danger);
}
.confirm-dialog__button--danger:hover{
  border-color:var(--danger);
  background:var(--danger);
  color:#fff;
}
.confirm-dialog__button:focus-visible{
  outline:2px solid var(--paper);
  outline-offset:3px;
}
@keyframes dialogEnter{
  from{ opacity:0; transform:translateY(8px) scale(0.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes backdropEnter{
  from{ opacity:0; }
  to{ opacity:1; }
}
@media (max-width:480px){
  .confirm-dialog__panel{ padding:20px; }
  .confirm-dialog__actions{ flex-direction:column-reverse; }
  .confirm-dialog__button{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .confirm-dialog[open],
  .confirm-dialog::backdrop{ animation:none; }
}