/* The art uses the same purchased pixel sprites as the Behind the Veil combat demo. */
.vf-announcement-modal.is-behind .vf-veil-signal{
  display:block;
  min-width:0;
  background:#07111d;
}
.vf-announcement-modal.is-behind .vf-veil-signal::after{display:none}
.vf-veil-pixel-scene{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 52% 40%,rgba(70,58,114,.42),transparent 48%),
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(107,159,187,.09) 40px 41px),
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(107,159,187,.07) 40px 41px),
    linear-gradient(#0a1b29,#06111d 76%);
}
.vf-veil-pixel-scene::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  opacity:.55;
  background:
    radial-gradient(circle,#fff0ba 0 1px,transparent 2px) 11px 24px / 107px 83px,
    radial-gradient(circle,#a8d7e5 0 1px,transparent 2px) 58px 69px / 139px 117px;
}
.vf-veil-pixel-scene::after{
  content:"";
  position:absolute;
  z-index:8;
  inset:0;
  pointer-events:none;
  opacity:.17;
  background:repeating-linear-gradient(0deg,transparent 0 3px,#000 4px 5px);
}
.vf-veil-pixel-scene p{position:absolute;z-index:9;margin:0;color:#e6d8ae;font:700 9px/1.3 Consolas,monospace;letter-spacing:.15em;text-shadow:0 1px #000}
.vf-veil-pixel-label{top:8%;left:8%;right:8%}
.vf-veil-pixel-caption{right:8%;bottom:8%;left:8%;display:flex;justify-content:space-between;gap:8px}
.vf-veil-pixel-caption b{color:#89c5d2;font-weight:700;white-space:nowrap}
.vf-veil-pixel-scene .vf-veil-pixel-floor{
  z-index:2;
  top:80%;
  right:0;
  bottom:0;
  left:0;
  border-top:4px solid #d89c4c;
  background:
    repeating-linear-gradient(90deg,transparent 0 31px,#855526 32px 35px),
    linear-gradient(#263d43,#0b1c26);
  box-shadow:0 -11px 0 rgba(111,164,182,.17);
}
.vf-veil-sprite{
  position:absolute;
  display:block;
  max-width:none;
  height:auto;
  object-fit:contain;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  user-select:none;
  pointer-events:none;
}
.vf-veil-boss{z-index:3;bottom:27%;left:12%;width:76%;opacity:.72;filter:drop-shadow(0 0 18px rgba(169,133,227,.32))}
.vf-veil-drone{z-index:5;top:18%;left:8%;width:29%;filter:drop-shadow(0 0 8px rgba(111,218,222,.28))}
.vf-veil-robot{z-index:5;bottom:19%;left:8%;width:29%;filter:drop-shadow(0 7px 1px rgba(0,0,0,.55))}
.vf-veil-hero{z-index:6;right:7%;bottom:19%;width:30%;filter:drop-shadow(0 8px 1px rgba(0,0,0,.6))}
#behind-the-veil-update .vf-veil-sprite-credit{margin:14px 0 0;color:#90a3ad;font:11px/1.5 "Segoe UI",sans-serif;letter-spacing:.02em}
.vf-veil-sprite-credit a{color:#e5cb92;text-decoration:underline;text-underline-offset:2px}
@media(max-width:760px){
  .vf-announcement-modal.is-behind .vf-veil-signal{min-height:230px}
  .vf-veil-pixel-label{top:9%;font-size:7px}
  .vf-veil-pixel-caption{bottom:7%;font-size:7px}
  .vf-veil-boss{left:25%;bottom:19%;width:50%}
  .vf-veil-drone{top:18%;left:14%;width:22%}
  .vf-veil-robot{bottom:17%;left:12%;width:20%}
  .vf-veil-hero{right:12%;bottom:17%;width:20%}
  .vf-veil-pixel-scene .vf-veil-pixel-floor{top:79%}
}