*{box-sizing:border-box}
:root{--hand-shadow:.7}
html,body{margin:0;height:100%;overflow:hidden;background:#07080c;color:#eef0f5;font-family:system-ui,sans-serif}
body.shadow-hand{background:#07080c;color:#eef0f5}

#caveBg{
  position:fixed;inset:0;z-index:0;opacity:0;pointer-events:none;
  background:url("cave-bg.webp") center/cover no-repeat;
  transition:opacity .25s;
}
body.shadow-hand #caveBg{opacity:1}

#app{position:fixed;inset:0;z-index:2}
#app canvas{display:block;width:100%;height:100%}
body.shadow-hand #app canvas{opacity:var(--hand-shadow)}

#video{
  position:fixed;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);
  opacity:0;z-index:0;pointer-events:none;background:transparent;
}
body.cam-bg #video{opacity:.42;z-index:1}
body.shadow-hand.cam-bg #video{opacity:.22}

.gate{
  position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:max(20px,env(safe-area-inset-top)) 24px max(20px,env(safe-area-inset-bottom));text-align:center;background:#07080c;
}
.gate-copy{max-width:min(340px,92vw);margin:0 0 18px;font-size:14px;line-height:1.5;color:#aeb5c4}
.gate-status{margin:14px 0 0;font-size:12px;color:#8df0b1}
.gate-status:empty{display:none}
.gate-status.err{color:#ff8b8b}
.gate-status.warn{color:#ffd37a}

#start{
  border:0;border-radius:999px;padding:12px 22px;
  background:#fff;color:#111;font-size:14px;font-weight:600;cursor:pointer;
}
#start:disabled{opacity:.45;cursor:default}

.tools{
  position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));z-index:6;
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;transform:translateX(-50%);
  width:min(640px,calc(100vw - 24px));
}
.tools button{
  border:0;border-radius:999px;padding:10px 14px;
  background:#ffffffe6;color:#111;font-size:12px;font-weight:600;cursor:pointer;
  backdrop-filter:blur(8px);
}
.tools button[aria-pressed="true"]{outline:2px solid #fff;outline-offset:2px}

body.live .gate{display:none}