/* MVH: SHIP IT! in a window on the monitor. Classes prefixed ar-. */
.ar-win {
  position: absolute; z-index: 21;
  display: flex; flex-direction: column;
  background: #d4d0c8;
  border: 2px solid; border-color: #fff #404040 #404040 #fff;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
  font: 14px/1.4 Tahoma, Verdana, sans-serif; color: #111;
}
.ar-win[hidden] { display: none; }
.ar-win.ar-front { z-index: 37; }
.ar-win *, .ar-win *::before, .ar-win *::after { box-sizing: border-box; }
.ar-title {
  flex: none; display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 4px 0 7px;
  background: linear-gradient(90deg, #0a246a, #3a6ea5 60%, #a6caf0);
  color: #fff; font-size: 13.5px; cursor: default; user-select: none;
}
.ar-inactive .ar-title { background: linear-gradient(90deg, #808080, #b5b5b5); color: #d4d0c8; }
.ar-title b { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.04em; }
.ar-tb { display: flex; gap: 2px; }
.ar-tb button {
  width: 21px; height: 19px; display: grid; place-items: center; padding: 0;
  background: #d4d0c8; color: #000; font: bold 12px/1 Tahoma, sans-serif;
  border: 1px solid; border-color: #fff #404040 #404040 #fff;
}
.ar-tb button:active { border-color: #404040 #fff #fff #404040; }
.ar-body { flex: 1; min-height: 0; margin: 3px; background: #000; border: 2px solid; border-color: #808080 #fff #fff #808080; }
.ar-frame { display: block; width: 100%; height: 100%; border: 0; background: #05060f; }
.ar-frame:fullscreen { background: #05060f; }

/* its mark: a little gamepad, used on the title bar, the taskbar, the Start menu and Alt+Tab */
.ar-ico, .task-ql-game i, .sm-ico-game, .alt-tab-arcade::before {
  position: relative; display: inline-block; flex: none; width: 18px; height: 11px; border-radius: 5px;
  background: linear-gradient(#f2f2f2, #b9b9c4); box-shadow: inset 0 0 0 1px #333;
}
.ar-ico::before, .task-ql-game i::before, .sm-ico-game::before {
  content: ""; position: absolute; left: 3px; top: 4px; width: 6px; height: 2px; background: #333; box-shadow: 2px -2px 0 -0px transparent;
}
.ar-ico::after, .task-ql-game i::after, .sm-ico-game::after {
  content: ""; position: absolute; right: 3px; top: 3px; width: 3px; height: 3px; border-radius: 50%; background: #e0242f; box-shadow: -4px 2px 0 #1b5790;
}
.sm-ico-game { width: 26px; height: 17px; margin: 4px 0; border-radius: 7px; }
.sm-ico-game::before { left: 4px; top: 7px; width: 8px; height: 3px; }
.sm-ico-game::after { right: 4px; top: 5px; width: 4px; height: 4px; box-shadow: -6px 3px 0 #1b5790; }
.alt-tab-arcade::before { position: absolute; inset: 14px 5px; width: auto; height: auto; border-radius: 12px; }
.alt-tab-arcade::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; color: #e0242f; }
.taskbar .task-arcade span::before { content: ""; }

/* the HUD's way in, beside the other chips */
.chip.chip-game { color: #ffd32a; }
.chip.chip-game span { color: #ff4757; }
/* four chips don't fit across a phone: they wrap, right-aligned */
@media (max-width: 700px) {
  .btns { flex-wrap: wrap; justify-content: flex-end; }
}