:root{
  --bg:#000;
  --focus:rgba(255,255,255,.92);
}

*{
  box-sizing:border-box;
}

html, body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  background:var(--bg);
}

body{
  position:relative;
  font-family:Arial, Helvetica, sans-serif;
}

.stage-wrapper{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  overflow:hidden;
}

.stage-box{
  position:relative;
  aspect-ratio:16/9;
  width:min(100vw, calc(100vh * 16 / 9));
  height:min(100vh, calc(100vw * 9 / 16));
  overflow:hidden;
  background:#000;
}

.stage{
  position:absolute;
  inset:0;
  background:#000 center / contain no-repeat;
  z-index:1;
}

.hitbox{
  position:absolute;
  z-index:50;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  cursor:pointer;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
}

.hitbox:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:4px;
}

.debug .hitbox{
  background:rgba(255,0,0,.18);
  outline:2px dashed rgba(255,255,255,.75);
}

.debug .hitbox.nav{
  background:rgba(0,128,255,.18);
}

.debug .hitbox.product{
  background:rgba(0,255,0,.18);
}

.debug .hitbox.action{
  background:rgba(255,255,0,.18);
}

/* ---------- navegação lateral padrão ---------- */

.nav-home,
.nav-back,
.nav-cardapio{
  position:absolute;
  left:4%;
  width:11%;
  height:4.5%;
  z-index:90;
}

.nav-home{ top:15.7%; }
.nav-back{ top:22.7%; }
.nav-cardapio{ top:29.3%; }

/* ---------- ENTRADA ---------- */

.cat-1{
  left:23%;
  top:66%;
  width:21%;
  height:9%;
}

.cat-2{
  left:54%;
  top:66%;
  width:21%;
  height:9%;
}

.cat-3{
  left:23%;
  top:76%;
  width:21%;
  height:9%;
}

.cat-4{
  left:54%;
  top:76%;
  width:21%;
  height:9%;
}

.cat-5{
  left:23%;
  top:86%;
  width:21%;
  height:9%;
}

.cat-6{
  left:54%;
  top:86%;
  width:21%;
  height:9%;
}

/* ---------- VITRINE ---------- */

.prod-1{
  left:20.5%;
  top:31.5%;
  width:10%;
  height:20%;
}

.prod-2{
  left:33.2%;
  top:31.5%;
  width:10%;
  height:20%;
}

.prod-3{
  left:45.9%;
  top:31.5%;
  width:10%;
  height:20%;
}

.prod-4{
  left:58.6%;
  top:31.5%;
  width:10%;
  height:20%;
}

.prod-5{
  left:71.3%;
  top:31.5%;
  width:10%;
  height:20%;
}

.prod-6{
  left:20.5%;
  top:57.2%;
  width:10%;
  height:20%;
}

.prod-7{
  left:33.2%;
  top:57.2%;
  width:10%;
  height:20%;
}

.prod-8{
  left:45.9%;
  top:57.2%;
  width:10%;
  height:20%;
}

.prod-9{
  left:58.6%;
  top:57.2%;
  width:10%;
  height:20%;
}

.prod-10{
  left:71.3%;
  top:57.2%;
  width:10%;
  height:20%;
}

/* ---------- CHECKOUT ---------- */

.checkout-confirm{
  left:74.8%;
  top:82.2%;
  width:16%;
  height:8.5%;
}

.checkout-back{
  left:18.2%;
  top:72%;
  width:14%;
  height:16%;
}

/* ---------- ajuda opcional ---------- */

.debug-note{
  position:absolute;
  left:1%;
  bottom:1%;
  z-index:120;
  padding:8px 10px;
  font:600 12px/1.2 Arial, sans-serif;
  color:#fff;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  display:none;
}

.debug .debug-note{
  display:block;
}