:root{
  --panel-bg: rgba(0,0,0,0.35);
  --stroke: rgba(255,255,255,0.25);
  --text: rgba(255,255,255,0.85);
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color: transparent;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
}

#bgVideo{
  position:fixed; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:-2;
}

#stage{
  position:fixed; inset:0;
  touch-action:none; /* allows pointermove on touch */
}

#wipe{
  position:fixed;
  left:50%; top:50%;
  width:20px; height:20px;
  border-radius:9999px;
  background:#fff;
  transform: translate(-50%,-50%) scale(0);
  transition: transform 550ms ease-out;
  z-index: 50;
  pointer-events:none;
  --wipe-scale: 1;
}
#wipe.on{
  transform: translate(-50%,-50%) scale(var(--wipe-scale));
}

#rig{
  position:fixed; inset:0;
  pointer-events:none;
}

#character{
  position:absolute;
  left:50%; top:50%;
  width: min(58vmin, 520px);
  height:auto;
  transform: translate(-50%,-50%);
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.35));
}

#eyes{
  position:absolute;
  left:50%; top:50%;
  width: min(58vmin, 520px);
  height:auto;
  transform: translate(calc(-50% + var(--eyes-x, 0px)), calc(-50% + var(--eyes-y, 0px)));
}

#arm{
  position:absolute;
  left:0; top:0;
  height: clamp(14px, 2.2vmin, 28px);
  width:auto;
  transform-origin: 0% 50%;
  transform: translate(0,-50%) rotate(0rad) scaleX(1);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.35));
}

#hand{
  position:absolute;
  left:50%; top:50%;
  width: clamp(18px, 3.3vmin, 36px);
  height:auto;
  transform: translate(-50%,-50%) rotate(0rad);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.35));
}

#items{
  position:fixed; inset:0;
}

.item{
  position:absolute;
  transform: translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 18px;
  border: 2px solid var(--stroke);
  border-radius: 16px;
  background: var(--panel-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: default;
}

.itemTitle{
  font-size: 14px;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.8);
  transition: color 180ms linear;
  white-space:nowrap;
}

.itemIcon{
  width: 44px;
  height: 44px;
  background-color: var(--icon-color, #fff);
  transition: background-color 180ms linear;
  -webkit-mask-image: var(--icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  cursor: pointer;
}

.item:hover .itemTitle,
.item.active .itemTitle{
  color: #fff;
}

.item:hover .itemIcon,
.item.active .itemIcon{
  background-color: #fff;
}

/* Prevent images from being draggable-selected */
img{ -webkit-user-drag:none; user-drag:none; }