body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#field_outer {
  height: min(100dvh, 75dvw);
  aspect-ratio: 39 / 18;
  background-color: #000;
  container-type: size;
  flex-shrink: 0;

  --cqw_px: calc(100 / 1664);   
  --px10: calc(10cqw * var(--cqw_px));
  --px20: calc(20cqw * var(--cqw_px));
  --px90: calc(90cqw * var(--cqw_px));
  --px96: calc(96cqw * var(--cqw_px));
  --nx96: calc(-1 * var(--px96));
  --px1024: calc(1024cqw * var(--cqw_px));
}

#field_outer::before, #field_outer::after {
  background: url("/assets/ui/general/curtain_vertical-74adf08d.png") no-repeat 0 0;
  background-size: cover;
  height: 100dvh;
  width: var(--px96);
  z-index: 20;
  top: 0;
}

#field_outer::before {
  transform: scaleX(-1);
  left: var(--nx96);
}

#field_outer::after {
  right: var(--nx96);
}


#contained {
  
  --1cqw: 1cqw;
  --cqw_px_ratio: calc(tan(atan2(16.64px, var(--1cqw))));

  --dialog_scale: 0.65;
  --hud_scale: calc(0.6 / var(--cqw_px_ratio));
  --hud_scale_factor: calc(1 / var(--hud_scale));

  overflow: clip;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
}

@property --1cqw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}



#field {
  background: #000;
  width: 100cqw;
  height: 100cqh;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  cursor: url("/assets/cursors/null-cb0984fc.png"), pointer;
}

#field input {
  user-select: auto;
  -webkit-user-select: auto;
}

#fieldbg {
  background-color: #000;
  background-size: inherit;
  background-repeat: no-repeat;
  width: 100cqw;
  height: 100cqh;
}

.hudlike {
  width: min(100dvw, 100cqw);
  height: 100cqh;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  position: absolute;
  top: 0;
  inset-inline: 0;
  margin-inline: auto;
}